引入Vuex
在./stores/vstore文件夹下的index.js中引入createStore，并配置全局的store
import { createStore } from "vuex";在main.js中引入./stores/vstore
import vstore from './stores/vstore';const app = createApp(App)app.use(vstore)export default app数据对象的存储与读取
创建Vuex Strore在state中声明要存储的数据对象
export default createStore({// 数据，相当于datastate:{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中对象的值
<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.moreTwoPopularreturn {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中数据对象的值
export default createStore({// 数据，相当于datastate:{golbalgood:{name:"pen",color:"black",num:100}},// 里边可以定义很多方法，用于操作state中的数据mutations:{changeGlobalGoodColor(state,color){state.golbalgood.color = color},changeGlobalGoodName(state, name){state.golbalgood.name = name}},
})<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.moreTwoPopularreturn {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中对象属性的值
import { createStore } from "vuex";export default createStore({// 数据，相当于datastate:{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)}},})<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.moreTwoPopularreturn {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
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中
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数据对象
<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.namethis.color = this.store.state.car.colorthis.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>
)
