Vuex 模块化 命名空间 语法糖

修改store.js

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

const personAbout = {
  namespaced: true, // 开启命名空间
  state: { x: 1 },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    countAbout,
    personAbout
  }
})

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

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

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

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

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

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

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

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