vuex数据共享与多模块化

2022年6月27日08:17:57

数据共享

数据共享：相同数据在多组件中使用
vuex数据共享与多模块化

vuex模块化

模块化+命名空间

目的： 让代码更好维护，让多种数据分类更加明确

修改store/index.js

// 该文件是准备vuex的核心 ==> store// 引入Vue核心库import Vuefrom"vue"// 引入Vueximport Vuexfrom'vuex'// 使用Vuex插件
Vue.use(Vuex)//count模块const countOptions={
	namespaced:true,// 开启命名空间
	actions:{...},
	mutations:{...},
	state:{},
	getters:{}}//person模块const personOptions={
	namespaced:true,// 开启命名空间
	actions:{...},
	mutations:{...},
	state:{},
	getters:{}}// 创建并暴露storeexportdefaultnewVuex.Store({
	modules:{// 声明模块
		countAbout:countOptions,
		personAbout:personOptions}})

1）开启命名空间后，组件中读取state数据

//方式一： 自己直接读取this.$store.state.personAbout.personList//方式二：借助mapState读取...mapState('countAbout',['sum','school','subject'])

2）开启命名空间后，组件中读取getters数据

//方式一： 自己直接读取this.$store.getters['personAbout/firstPersonName']//方式二：借助mapGetters读取...mapGetters('countAbout',['bigSum'])

3）开启命名空间后，组件中调用dispatch

//方式一： 自己直接dispatchthis.$store.dispatch('personAbout/addPersonWang',person)//方式二：借助mapActions...mapActions('countAbout',{incrementOdd:'plusOdd',incrementWait:'plusWait'})

4）开启命名空间后，组件中调用commit

//方式一： 自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二：借助mapMutations...mapActions('countAbout',{increment:'PLUS',decrement:'MINUS'})
  • 作者：Fq琦琦
  • 原文链接：https://blog.csdn.net/weixin_40879055/article/details/120856363
    更新时间：2022年6月27日08:17:57 ，共 1140 字。