Vuex:具有动态名称空间的createNamespacedHelpers

Vuex 是 Vue.js 的状态管理库，它允许你在一个集中式的存储中管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 提供了模块化的功能，允许开发者将 store 分割成模块（module），每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块。

createNamespacedHelpers 是 Vuex 提供的一个辅助函数，用于创建基于命名空间的辅助函数。当你的模块使用了命名空间（namespaced: true），这意味着这个模块内的所有 actions、mutations 和 getters 都注册在全局命名空间下，以避免命名冲突。使用 createNamespacedHelpers 可以简化在组件中调用这些命名空间下的方法。

基础概念

命名空间（Namespaced）：在 Vuex 中，模块可以通过设置 namespaced: true 来启用命名空间，这样模块内部的 actions、mutations 和 getters 就会被限定在这个模块的命名空间内。
辅助函数（Helpers）：Vuex 提供了一些辅助函数，如 mapState, mapActions, mapMutations, mapGetters 等，它们可以帮助你在组件中更方便地映射 store 中的状态和方法。

优势

避免命名冲突：通过命名空间，不同的模块可以使用相同的 action 或 mutation 名称而不会相互干扰。
更好的组织结构：命名空间使得大型应用的状态管理更加模块化和清晰。
简化组件中的调用：createNamespacedHelpers 可以减少模板中的重复代码，使得组件更加简洁。

类型

createNamespacedHelpers 返回的是一组辅助函数，这些函数会自动将提供的命名空间添加到对应的 action、mutation 和 getter 调用中。

应用场景

当你有一个复杂的应用，且 store 被分割成多个模块时，每个模块都有自己的命名空间，这时使用 createNamespacedHelpers 可以让你在组件中更简洁地调用这些模块的方法。

示例代码

假设你有一个名为 user 的模块，它启用了命名空间：

// store/modules/user.js
export default {
namespaced: true,
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
};

在组件中，你可以这样使用 createNamespacedHelpers：

import { createNamespacedHelpers } from 'vuex';
const { mapState, mapActions } = createNamespacedHelpers('user');

export default {
computed: {
...mapState({
userName: state => state.name
})
},
methods: {
...mapActions([
'updateName'
])
}
};