VUEX 使用学习六 : modules

vuex,使用,学习,modules · 浏览次数 : 74

小编点评

**Store模块化示例** ```javascript const moduleA = { state: () => ({ count: 0 }), mutations: { increment (state) { state.count++; } }, getters: { doubleCount (state) { return state.count * 2; } }, actions: { incrementIfOddRootsum (context) { if ((context.state.count + context.rootState.count) % 2 === 1) { context.commit('increment'); } } } }; const moduleB = { state: () => ({ count: 0 }), mutations: { increment (state) { state.count++; } }, getters: { doubleCount (state) { return state.count * 2; } }, actions: { // context对象其实包含了 state、commit、rootState。 incrementIfOddRootsum (context) { if ((context.state.count + context.rootState.count) % 2 === 1) { context.commit('increment'); } } } }; const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }); // 从模块中获取状态 console.log(store.state.a.count); // 调用 actions store.dispatch('incrementIfOddRootsum'); ``` **说明：** * `store.state` 是一个包含所有应用状态的对象。 * `store.modules` 是一个包含所有模块的对象。 * `moduleA` 和 `moduleB` 是独立的 Store 模块。 * `mapState`、`mapGetters`、`mapActions` 和 `mapMutations` 辅助函数可以方便地绑定事件。

正文

转载请注明出处：

　　当Store中存放了非常多非常大的共享数据对象时，应用会变的非常的复杂，Store对象也会非常臃肿，所以Vuex提供了一个Module模块来分隔Store。通过对Vuex中的Store分隔，分隔成一个一个的Module模块，每个Module模块都拥有自己的state、mutation、actions和getters。

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

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

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

　　对于模块中的mutations和getters，传入的第一个参数规定为state，而actions则依旧是context参数。如下：

const moduleA = {
  state: {
     count: 0
  },
  mutations: {
    increment (state) {
      // 这里的 `state` 对象是模块的局部状态
      state.count++
    }
  },

  getters: {
    doubleCount (state) {
      return state.count * 2
    }
  },
  actions: {
      // context对象其实包含了 state、commit、rootState。
      incrementIfOddRootsum (context) {
        if ((context.state.count + context.rootState.count) % 2 === 1) {
        // 调用mutations
        commit('increment')
      }
      }
  }
}

在module中通过mapState、mapGetters、mapActions和mapMutations等辅助函数来绑定要触发的函数

　　第一种方式

methods: {
    ...mapActions([
        'some/nested/module/foo',
        'some/nested/module/bar'
    ])
}

　　在vuex中，可以为导入的state、getters、actions以及mutations命名别名，，这样可以方便调用

methods: {
    ...mapActions([
        'foo': 'some/nested/module/foo',
        'bar': 'some/nested/module/bar'
    ])
}

　　第二种方式
　　对于这种情况，你可以将模块的空间名称字符串作为第一个参数传递给上述函数，这样所有绑定都会自动将该模块作为上下文。于是上面的例子可以简化为：

methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
}

　　在网上找到一个demo 示例，可参考学习： https://gitee.com/xiangbaxiang/vue-store