Vuex: 模块名字空间

对于大型app，Vuex 的store 应该分成若干模块 module，使代码易于管理，工程结构举例：

src 里存放 store 文件夹，store 里存放主要的 index.js 文件，以及一个 module 里有两个模块 products 和 counter，

store文件夹的根 index.js：

import { createStore } from 'vuex';
import rootMutations from './mutations';
import rootActions from './actions';
import rootGetters from './getters';
import counterModule from './modules/counter/index';

const store = createStore({
    modules: {
      // 使用模块counterModule，并将其更名为 numbers
      numbers: counterModule,
    },
    state() {
      return {
        isloggedIn: false,
      };
    },
    mutations: rootMutations,
    actions: rootActions,
    getters: rootGetters,
  });
  
  export default store;

这些独立的模块最终合并成整个store，为了防止合并时出现命名冲突，可以使用名字空间，上面的counterModule模块设置 namespaced 属性为 true：

import counterMutations from "./mutations";
import counterActions from "./actions";
import counterGetters from "./getters";

export default {
	// 使用名字空间！
    namespaced: true,
    state() {
      return {
        counter: 0,
      };
    },
    mutations: counterMutations,
    actions: counterActions,
    getters: counterGetters,
  };

然后其他组件使用store里的数据或方法时，代码进行相应的修改，加上名字空间 numbers，写法举例：

 methods: {
    addOne() {
      // this.$store.dispatch('numbers/increase', { value: 10 });
      this.$store.dispatch({
        type: 'numbers/increase',
        value: 10,
      })
    },
  },
  computed: {
    // ...mapGetters(['authState']),
    isAuth() {
        return this.$store.getters.userIsAuthenticated;
    }
  },

        // ...mapActions(['increment', 'increase'])
        ...mapActions('numbers', {
            inc: 'increment',
            increase: 'increase',
        })

  computed: {
    counter() {
      // return this.$store.getters.normalizedCounter;
      return this.$store.getters["numbers/normalizedCounter"];
    },
  },

<script>
import { mapGetters } from 'vuex';
export default {
  computed: {
    // counter() {
    //   return this.$store.getters.finalCounter;
    // },
    ...mapGetters('numbers', ['finalCounter', 'testAuth']),
  },
};
</script>