VUEX 使用学习六 : modules

标签：... modules mutations actions 学习 state module 模块 VUEX

转载请注明出处：

　　当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

 

标签：...,modules,mutations,actions,学习,state,module,模块,VUEX
From： https://www.cnblogs.com/zjdxr-up/p/17077608.html