Vuex模块化和命名空间namespaced实例演示 Vuex模块化和命名空间namespace

1. 目的：让代码更好维护，让多种数据分类更加明确。
2. 修改store/index.js store/index.js

const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}}const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }}const store = new Vuex.Store({modules: {countAbout,personAbout}})

注意： namespaced:true,要开启命名空间
3. 开启命名空间后，组件中读取state数据：

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

4. 开启命名空间后，组件中读取getters数据：

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

5. 开启命名空间后，组件中调用dispatch

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

【Vuex模块化和命名空间namespaced实例演示】开启命名空间后，组件中调用commit

//方式一：自己直接committhis.$store.commit('personAbout/ADD_PERSON',person)//方式二：借助mapMutations：...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

例子：
Fenix：

文章图片

文章图片

总代码：

文章图片

main.js

//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//引入storeimport store from './store'//关闭Vue的生产提示Vue.config.productionTip = false//创建vmnew Vue({ el:'#app', render: h => h(App), store, beforeCreate() {Vue.prototype.$bus = this }})

App.js

store/index.js

//该文件用于创建Vuex中最为核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'import countOptions from './count'import personOptions from './person'//应用Vuex插件Vue.use(Vuex)//创建并暴露storeexport default new Vuex.Store({ modules:{countAbout:countOptions,personAbout:personOptions }})

store/count.js

//求和相关的配置export default { namespaced:true, actions:{jiaOdd(context,value){console.log('actions中的jiaOdd被调用了')if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context,value){console.log('actions中的jiaWait被调用了')setTimeout(()=>{context.commit('JIA',value)},500)} }, mutations:{JIA(state,value){console.log('mutations中的JIA被调用了')state.sum += value},JIAN(state,value){console.log('mutations中的JIAN被调用了')state.sum -= value}, }, state:{sum:0, //当前的和school:'尚硅谷',subject:'前端', }, getters:{bigSum(state){return state.sum*10} },}

store/person.js

//人员管理相关的配置import axios from 'axios'import { nanoid } from 'nanoid'export default { namespaced:true, actions:{addPersonWang(context,value){if(value.name.indexOf('王') === 0){context.commit('ADD_PERSON',value)}else{alert('添加的人必须姓王！')}},addPersonServer(context){axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(response => {context.commit('ADD_PERSON',{id:nanoid(),name:response.data})},error => {alert(error.message)})} }, mutations:{ADD_PERSON(state,value){console.log('mutations中的ADD_PERSON被调用了')state.personList.unshift(value)} }, state:{personList:[{id:'001',name:'张三'}] }, getters:{firstPersonName(state){return state.personList[0].name} },}

components/Count.vue