Vuex 命名空间

原帖 https://blog.csdn.net/lzb348110175/article/details/89387495

接上篇：组件中调用 Vuex 的 state，getters，mutations，actions，modules 的数据传递、传参问题

Vuex 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

因此，Vuex 允许我们将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或 action 作出响应。如果希望你的模块具有更高的封装度和复用性，此时就用到了命名空间这个概念。

1.如何使模块成为一个命名空间模块？

你可以在单个模块中通过添加namespaced：true的方式使其成为带命名空间的模块。

const moduleA ={
    namespaced:true,  //开启namespace:true，该模块就成为命名空间模块了
    state:{
        count:10,
        countA:888
    },
    getters:{...},
    mutations:{...},
    actions:{...}
}

2.组件中如何获取带有命名空间 moduleA 中的 state 数据？

1、基本方式：
    this.$store.state.moduleA.countA
2、mapState辅助函数方式：
    ...mapState({
        count:state=>state.moduleB.countB
    })

获取 state 数据，与https://blog.csdn.net/lzb348110175/article/details/89351059 中的 1.State 中的取法一样

3.组件中调用命名空间模块中的 getters

共有三种方式，如下：
//1.
commonGetter(){
    this.$store.getters['moduleA/moduleAGetter']
},
//2.
...mapGetters('moduleA',['moduleAGetter']),此处的moduleA，不是以前缀的形式出现！！！
//3.别名状态下
...mapGetters({
    paramGetter:'moduleA/moduleAGetter'
}),

}),

4.组件中调用命名空间模块中的 Mutations

共有三种方式，如下：
//1,3加个前缀moduleA/，都可以实现。2使用辅助函数未变名称的特殊点！！！
//1.
commonMutation(){
    this.$store.commit('moduleA/moduleAMutation');
},
//2.
...mapMutations('moduleA',['moduleAMutation']),
//3.别名状态下
...mapMutations({
    changeNameMutation:'moduleA/moduleAMutation'
}),

5.组件中调用命名空间模块中的 Actions（与 mutations 一致）

共有三种方式，如下：
1,3加个前缀moduleA/，都可以实现。2使用辅助函数未变名称的特殊点！！！
//1.
commonAction(){
    this.$store.dispatch('moduleA/moduleAAction')
},
//2.
...mapActions('moduleA',['moduleAAction']),
//3.别名状态下
...mapActions({
    changeNameAction:'moduleA/moduleAAction'
})

备注：组件中如何对调用的 getters，mutations，actions 传参，没有发现辅助函数该如何传参，有待实践中继续研究，后续会有补充的…..补充中……补充中

6. 带命名空间的 moduleA，moduleB 模块中，如何获取根 store，当前模块，兄弟模块中的 action，mutations ，getters 方法？

7.在带命名空间的模块中，如何将 action 注册为全局 actions

两个条件：

① 添加 root: true

② 并将这个 action 的定义放在函数 handler 中

//storeAction 在命名空间 moduleA 中，但是它是一个全局 actions

//storeAction在命名空间moduleA中，但是它是一个全局actions
const moduleA = {
  namespaced: true,
  storeAction: {
    root: true, //条件1
    handler(namespacedContext, payload) {
      //条件2：handler
      //namespacedContext 上下文信息
      //payload 载荷，即参数
      console.log(namespacedContext);
      console.log(payload);
      alert("我是模块A中的全局storeAction");
    },
  },
};

8.当使用 mapState, mapGetters, mapActions 和 mapMutations 这些函数来绑定带命名空间的模块时，写起来可能比较繁琐，该怎么解决呢？

computed: {
    ...mapState({
        a: state => state.some.nested.module.a,
        b: state => state.some.nested.module.b
    })
},
methods: {
    ...mapActions([
        'some/nested/module/foo', // -> this['some/nested/module/foo']()
        'some/nested/module/bar' // -> this['some/nested/module/bar']()
    ])
}

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

computed: {
    ...mapState('some/nested/module', {
        a: state => state.a,
        b: state => state.b
    })
},
methods: {
    ...mapActions('some/nested/module', [
        'foo', // -> this.foo()
        'bar' // -> this.bar()
    ])
}

9.除了 8 中的将空间名称作为第一个参数传递外，还有其它别的方法吗？

你可以通过使用 createNamespacedHelpers 创建基于某个命名空间辅助函数。它返回一个对象，对象里有新的绑定在给定命名空间值上的组件绑定辅助函数：

import { createNamespacedHelpers } from "vuex";

const { mapState, mapActions } = createNamespacedHelpers("some/nested/module");

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: (state) => state.a,
      b: (state) => state.b,
    }),
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions(["foo", "bar"]),
  },
};