vuex中模块modules的用法

目标

1.什么是module？
2.怎么用module？
3.样板代码目录结构

知识点

1.modules

在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，store对象也将对变得非常大，难于管理。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

2.目录结构

store
│  index.js
│  
├─login
│      actions.js
│      getters.js
│      index.js
│      mutation-type.js
│      mutations.js
│      state.js
│      
└─list
        actions.js
        getters.js
        index.js
        mutation-type.js
        mutations.js
        state.js

3.根目录的index.js 代码示例

import moduleA from './login'
import moduleB from './list'
const store = new Vuex.Store({
 modules: {
  a: moduleA,
  b: moduleB
 })

4.模块内部的index.js示例

import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

export default {
        namespaced: true,  //开启命名空间
        state,
        mutations,
        actions,
        getters
};