Vuex 模块化

1、store/index.js中，设计模块化配置

//用于创建vuex最为核心的store
import vuex from "vuex";
import Vue from "vue";
Vue.use(vuex)//创建 vm.$store


//创建count模块的配置，也可以再创建store/count.js
const countOptions={
    //命名空间：默认false
    //false则组件中，vc调用map方法无法获取模块名称
    namespaced:true,
    state:{},
    actions:{},
    mutations:{},
    getters:{}
};

//创建person模块的配置
const personOptions={
    namespaced:true,
    state:{},
    actions:{},
    mutations:{},
    getters:{}
};

export default new vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:countOptions
    }
})

2、开启命名空间

 再模块配置中，namespaced:true,默认为false，false则组件中无法获取该模块空间

3、组件中，读取～对应数据 or 调用方法

 读取state数据

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

 读取getter数据

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

 组件中，调用dispatch方法

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

 

组件中，调用commit方法

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