VUEX 使用学习六 : modules

简介: VUEX 使用学习六 : modules

转载请注明出处:

  当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

 

标签: Vue学习使用

目录
打赏
0
0
0
0
77
分享
相关文章
Vuex模块module的详解
Vuex 模块是将 store 分割成多个模块的一种方式,每个模块都有自己的状态、mutations、actions 和 getters。这有助于更好地组织和管理应用程序的状态。
[JS] ES Modules的运作原理
【9月更文挑战第16天】ES Modules(ECMAScript Modules)是 JavaScript 中的一种模块化开发规范,适用于浏览器和 Node.js 环境。它通过 `export` 和 `import` 关键字实现模块的导出与导入。模块定义清晰,便于维护和测试。JavaScript 引擎会在执行前进行静态分析,确保模块按需加载,并处理循环依赖。ES Modules 支持静态类型检查,现代浏览器已原生支持,还提供动态导入功能,增强了代码的灵活性和性能。这一规范显著提升了代码的组织和管理效率。
100 1
Module ‘“xx.vue“‘ has no default export.Vetur(1192)
Module ‘“xx.vue“‘ has no default export.Vetur(1192)
1726 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等