Vuex中模块的命名空间是什么？

Question

我最近开始接触 vuex。

官方的文档很好地解释了什么是模块，但我不确定我是否正确理解了模块中的命名空间。

有人能更好地解释一下命名空间吗？何时/为什么要使用它？

非常感谢。

- Abdullah Khan

Answer 1

当你的应用程序有一个非常大的状态对象时，通常会将其分成模块。

这基本上意味着将状态拆分成较小的部分。其中一个注意事项是，由于模块被集成到同一状态中，您不能使用相同的方法名称，例如：

moduleA {
  actions:{
    save(){}
  }
}

moduleB {
  actions:{
    //this will throw an error that you have the same action defined twice
    save(){}
  }
}

因此，为了实现这一点，您可以选择将模块定义为命名空间，并且您可以在不同的模块中使用相同的方法：

moduleA {
  actions:{
    save(){}
  },
  namespaced: true
}

moduleB {
  actions:{  
    save(){}
  },
  namespaced: true
}

然后你可以这样调用它：

this.$store.dispatch('moduleA/save')
this.$store.dispatch('moduleB/save')

请注意，如果您正在使用 mapGetter 或 mapActions，事情可能会变得有点复杂，因为现在 getters 的形式为 ['moduleA/client']

因此，只有在确实需要时才使用它。

- Tomer

Answer 2

默认情况下，Vuex在全局命名空间中注册所有的getter、action。随着Vuex模块数量的增加，全局命名空间将面临冲突。因此，命名空间方法出现以解决这个问题。命名空间模块不会在全局命名空间中注册，而是在特定模块的namespace下可用。

考虑一个具有两个模块products和cart的示例：

//products module
export default {
    namespaced: true,
    state: {
        products: []
    },
    getters: {
        products(state){
            return state.products
        }
    },
    actions: {
        async load(context, params){ ... }
    },
    mutations: {
        products(state, data){ ... }
    }
}

另一个模块具有类似的 getters 和 actions 功能，

//cart module
export default {
    namespaced: true,
    state: {
        products: [],
        cart: []
    },
    getters: {
        products(state){ return state.products }
        cart(state){ return state.cart}
    },
    actions: {
        async load(context, params){ ... },
        async set(context, params){ ... },
    },
    mutations: {
        products(state, data){ ... },
        cart(state, data){ ... }
    }
}

products和cart模块都有一个叫做product的getter和一个叫做load的action。如果没有使用命名空间，使用这样的模块会导致问题。在模块的根部设置namespaced：true可以帮助解决这种情况。

您可以使用命名空间来映射getter，例如：...mapGetters（['products/products']），对于mapActions也是如此。

- Kiran Maniya

Answer 3

为了使用它，我们可以将模块命名空间字符串作为第一个参数传递给帮助器函数，以便所有绑定都使用该模块作为上下文进行绑定。以上内容可以简化为：

...mapGetter('moduleA/client', {
    a: state => state.a
});

- yuchun

Answer 4

我不是vue.js的专家，但从文档中可以看到，命名空间可用于修改模块的getter/action/mutation的路径访问。

默认情况下，namespaced: false，所有的getter/action/mutation都可以被不同模块全局使用，因此如果要在不同模块中使用相同的getter/action/mutation，则必须将它们标记为namespaced: true，否则会抛出错误。

另一个用途是将你的getter/action/mutation组织在不同的路径中（即模块注册的路径）。这在大型项目中非常有用，因为你可以立即知道getter/action/mutation定义在哪里，这样更容易找到它们。

- fmaccaroni