Vuex modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
  state: () => ({
    count: 0
  }),
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    actionAdd(context) { 
      context.commit('increment')
    }
  }
}
const store = new Vuex.Store({
  modules: {
    moduleA
  }
})
export default store

读取状态

<template>
  <div>
    {{ count }}
  </div>
</template>
<script>

export default {
  data() {
    return {};
  },
  computed: {
     count() {
      return this.$store.state.moduleA.count;
    }
  }
};
</script>

或者，使用 mapState 辅助函数帮助我们生成计算属性

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      count: (state) => state.moduleA.count,
    }),
  },
};
</script>

除了 state 是分模块的，其他 mutations 和 actions 都不分模块

<template>
  <div>
    {{ count }}
    <p><button @click="actionAdd">+</button></p>
  </div>
</template>

import {  mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      count: (state) => state.moduleA.count,
    }),
  },
  methods: {
   actionAdd() {
      this.$store.commit("increment");
    }
  },
};
</script>

或者，使用 mapActions 辅助函数

<script>
import { mapActions , mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      count: (state) => state.moduleA.count,
    }),
  },
  methods: {
     ...mapActions([
        "actionAdd"
       ])
  },
};
</script>