VUEX 使用学习六 : modules

Posted 2023-01-31 香吧香

转载请注明出处：

　　当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