最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

环球快报: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

关键词： 一个一个 找到一个 提供了一个