vuex - Module的基本使用

module是模块的意思

vue使用单一状态树，这意味着很多状态都交给vuex进行管理，当应用比较复杂时，store对象可能会变得比较臃肿。为了解决这个问题，vuex允许将store分成模块（module），每个模块都拥有自己的state、mutations、actions、getters、module

module中的state

1. 模块a

const moduleA = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}

export default new Vuex.Store({

  // 划分模块
  modules: {
    a: moduleA
  }
 })

2. 存放状态

const moduleA = {
  state: {
    name:'aaa'
  },
  mutations: {},
  actions: {},
  getters: {}
}

3. 在App.vue中显示
   虽然建立了模块a，但是vuex内部是将模块a放入了state中，所以需要从state中将a取出

<h2>{{$store.state.a.name}}</h2>

module中的mutations

例子：修改state中的名字

mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },

<h2>{{$store.state.a.name}}</h2>
<button @click="updateName">修改名字</button>

模块中mutations也是使用commit，它会先去根部mutations中寻找，如果没有，再去模块中的mutations中寻找。

updateName() {
      this.$store.commit("updateName", "bbb");
    }

module中的getters

1. 基本使用

getters: {
    addName(state) {
      return state.name + '111';
    }
  }

App.vue中展示

<h2>{{$store.getters.addName}}</h2>

2. 传入参数

addName2(state, getters) {
      return getters.addName + '222';
    }

<h2>{{$store.getters.addName2}}</h2>

3. 获取根部state中的数据

export default new Vuex.Store({
  state: {
    counter: 0,
  }
 })

addName3(state, getters, rootstate) {
      return getters.addName2 + rootstate.counter;
    }

<h2>{{$store.getters.addName3}}</h2>

module中的actions

例子：点击按钮，修改名字

mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
actions: {
    // 这里的context只是指模块中的mutations
    aUpdateName(context) {
      setTimeout(() => {
        context.commit('updateName', '999')
      }, 1000)
    }
  },

在App.vue页面

<button @click="updateN">修改名字</button>

updateN() {
      this.$store.dispatch("aUpdateName");
    }