引入Vuex
在./stores/vstore文件夹下的index.js中引入createStore，并配置全局的store
javascript
import { createStore } from "vuex";在main.js中引入./stores/vstore
javascript
import vstore from './stores/vstore';
const app = createApp(App)
app.use(vstore)
export default app数据对象的存储与读取
创建Vuex Strore在state中声明要存储的数据对象
javascript
export default createStore({
// 数据，相当于data
state:{
userinfo:{
name:"Alisa",
color:"yellow",
age:"33"
},
golbalgood:{
name:"pen",
color:"black",
num:100
},
populars:[
{
num:100, name:"one hundrerd"
},
{
num:200, name:"two hundrerd"
},
{
num:300, name:"three hundrerd"
},
{
num:400, name:"four hundrerd"
},
]
}
})读取state中对象的值
javascript
<template>
<div class="box">
<div class="back">
<div class="show">全局store中的userinfo的name：{{ $store.state.userinfo.name }}</div>
<div class="show">全局store中的golbalgood的num：{{ $store.state.golbalgood.num }}</div>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
export default{
setup(props, context){
const store = useStore()
const popularNames = store.getters.moreTwoPopular
return {
store,
popularNames,
}
},
data(){
return {
}
}
}
</script>
<style lang="less" scoped>
.showtxt{
padding: 5px;
font-size: 20px;
}
.btn{
background-color: cadetblue;
padding: 2px 5px 2px 9px;
margin: 20px;
}
.back{
background-color: antiquewhite;
.show{
padding: 5px;
font-size: 20px;
}
}
</style>在mutation中改变state中数据对象的值
javascript
export default createStore({
// 数据，相当于data
state:{
golbalgood:{
name:"pen",
color:"black",
num:100
}
},
// 里边可以定义很多方法，用于操作state中的数据
mutations:{
changeGlobalGoodColor(state,color){
state.golbalgood.color = color
},
changeGlobalGoodName(state, name){
state.golbalgood.name = name
}
},
})
javascript
<template>
<div class="box">
<h3>2 改变vuex中的数据</h3>
<div class="back">
<div>
<span class="showtxt">全局store中globalgood的color：{{ $store.state.golbalgood.color}}</span>
<span class="btn" @click="changeGlobalGoodColor">通过commit触发mutations change</span>
</div>
<div>
<span class="showtxt">全局store中globalgood的name：{{ $store.state.golbalgood.name }}</span>
<span class="btn" @click="changeGlobalGoodName">通过dispatch触发actions change</span>
</div>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
export default{
setup(props, context){
const store = useStore()
const popularNames = store.getters.moreTwoPopular
return {
store,
popularNames,
}
},
data(){
return {
}
},
methods:{
changeGlobalGoodColor(){
this.$store.commit("changeGlobalGoodColor", "white~")
},
changeGlobalGoodName(){
this.$store.dispatch("changeGlobalGoodName", "paper")
}
}
}
</script>
<style lang="less" scoped>
.showtxt{
padding: 5px;
font-size: 20px;
}
.btn{
background-color: cadetblue;
padding: 2px 5px 2px 9px;
margin: 20px;
}
.back{
background-color: antiquewhite;
.show{
padding: 5px;
font-size: 20px;
}
}
</style>getter读取数据
通过getter获取state中对象属性的值
objectivec
import { createStore } from "vuex";
export default createStore({
// 数据，相当于data
state:{
populars:[
{
num:100, name:"one hundrerd"
},
{
num:200, name:"two hundrerd"
},
{
num:300, name:"three hundrerd"
},
{
num:400, name:"four hundrerd"
},
]
},
// 类似于组件的计算属性
getters:{
moreTwoPopular(state){
return state.populars.filter(item=>item.num>200)
}
},
})
javascript
<template>
<div class="box">
<div class="back">
<div v-for="(item, index) in popularNames" :key="index">
<!-- <span class="showtxt"> -->
全局store中globalgood过滤条件后的name：{{ item.name }}
<!-- </span> -->
</div>
</div>
</div>
</template>
<script>
import { useStore } from "vuex";
export default{
setup(props, context){
const store = useStore()
const popularNames = store.getters.moreTwoPopular
return {
store,
popularNames,
}
}
}
</script>
<style lang="less" scoped>
.showtxt{
padding: 5px;
font-size: 20px;
}
.btn{
background-color: cadetblue;
padding: 2px 5px 2px 9px;
margin: 20px;
}
.back{
background-color: antiquewhite;
.show{
padding: 5px;
font-size: 20px;
}
}
</style>vuex使用modules引入拆分得store
下面是一个拆分出的store，car.js
javascript
export default {
state:{
name:"byd",
color:"white",
speed:"300"
},
mutations:{
changeCarName(state, name){
state.car.name = name
},
changeCarColor(state, color){
state.car.color = color
},
changeCarSpeed(state,speed){
state.car.speed = speed
}
},
actions:{
changeCarName(context, name){
setTimeout(() => {
context.commit('changeCarName', name)
}, 300);
},
changeCarColor(context, color){
setTimeout(() => {
context.commit('changeCarColor', color)
}, 3000);
},
changeCarSpeed(context,speed){
setTimeout(() => {
context.commit('changeCarSpeed', speed)
}, 3000);
}
}
}将car.js引入到全局store中的modules中
javascript
import { createStore } from "vuex";
import car from "./modules/car.js";
export default createStore({
// state过长时用于分割成多个state，每个里边可以包含state、mutations、actions，getter这些属性
modules:{
car,
}
})在自定义组件ComA中使用car.js中存储的car数据对象
javascript
<template>
<div class="box">
<span>使用Vuex中的modules中的模块Car,</span>
<span>获取Car的name: {{ name }},</span>
<span>获取Car的color: {{ color }},</span>
<span>获取Car的speed: {{ speed }}</span>
<div class="btn" @click="clickbtn"> tap </div>
</div>
</template>
<script>
import { useStore } from "vuex";
export default{
setup(){
const store = useStore()
return{
store
}
},
data(){
return {
name:"1",
color:"2",
speed:"3",
}
},
methods:{
clickbtn(){
console.log("ComA clickbtn", this.store.state.car.name)
this.name = this.store.state.car.name
this.color = this.store.state.car.color
this.speed = this.store.state.car.speed
}
}
}
</script>
<style lang="less" scoped>
.box{
display: flex;
flex-direction: row;
background-color: antiquewhite;
align-items: center;
margin-top: 20px;
.btn{
margin-left: 15px;
padding: 2px 20px 2px 20px;
background-color: aquamarine;
}
}
</style>