Vuex模块化

Vuex模块化可以将功能分成单独的一个对象，每个功能里面都包含actions、mutations、state、getters

​
//这是求和的一个功能  单独分成一个模块
const countOptions = {
  namespaced: true,  //开启命名空间
  actions: {},
  mutations: {},
  state: {},
  getters: {}
}

//这是人员列表功能  单独分成一个模块
const personOptions = {
  namespaced: true,  //开启命名空间
  actions: {},
  mutations: {},
  state: {},
  getters: {}
}

导出的时候需要用modules对象导出 可以直接写简写形式 也可以写原来的形式{a:countOptions} 用的countOptions的时候就写a就可以

export default new Vuex.Store({
  modules: {
    countOptions,
    personOptions
  }
})

在组件中调用的时候，可以直接使用mapMutations等方法直接快速生成调用方法或快速获取数据

//这表示的是在countOptions这个对象的Mutations里面找JIA和JIAN方法  只有组件中调用的方法名和countOptions中的方法名相同才可以用数组形式
...mapMutations('countOptions', ['JIA', 'JIAN']),
​
//这表示的是在countOptions这个对象的Actions里面调用js和waittime方法，并将事件命名为ADD和waittime，供组件中调用
...mapActions('countOptions', { ADD: 'js', waittime: 'waittime' })

做了模块化分类开启命名空间后直接读取state中的数据

//方式1：自己读取
this.$store.state.personOptions.personList  //里面的personOptions就是分类的名称  personList就是这个分类里面的数据名
​
//方式2：借助mapstate
...mapState('countOptions', ['sum', 'school', 'subject']), //表示的是读取countOptions中的sum等数据   只有读取的数据名和组件中用到的数据名一致 才可以使用数组形式

** 做了模块化分类开启命名空间后调用commit* *

//方式1：直接调用commit
this.$store.commit('personOptions/ADD_PERSON', personObj)
​
//方式2：借助mapMutations
...mapMutations('countOptions', ['JIA', 'JIAN']),//里面的JIA是组件中使用的方法名 调用的也是countOptions中Mutations对象里面的JIA这个方法  只有组件中调用的方法名和Mutations里面的方法名一致才可以使用数组形式

做了模块化分类开启命名空间后调用dispatch

//方式1:直接调用 dispatch
this.$store.dispatch('personOptions/Addwang', this.msg)  //personOptions就是分类名称 后面跟的就是调用的方法名
​
//方式2：借助mapActions
...mapActions('countOptions', { ADD: 'js', waittime: 'waittime' }) //里面的ADD是组件中使用的方法名  后面的js是调用countOptions中actions对象里面的方法名

\