Javascript vuex中模块的名称空间是什么

我最近开始使用

vuex

这位官员很好地解释了模块是什么，但我不确定我是否正确理解模块中的名称空间

有人能用更好的方式解释名称空间吗？何时/为什么使用它

---

非常感谢。

当你有一个带有非常大状态对象的大型应用程序时，你通常会将其划分为多个部分

这基本上意味着你把这个州分成更小的部分。需要注意的一点是，您不能对模块使用相同的方法名，因为它集成到相同的状态中，例如：

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

，可能会使事情变得复杂一些，因为Getter现在的形式是

['moduleA/client']

---

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

我不是vue.js方面的专家，但正如我在文档中看到的那样，名称空间可用于修改对模块的getter/actions/translations的路径访问

默认情况下，

namespaced:false

所有的getter、action和mutation都可由不同的模块全局使用，因此如果要在不同的模块中使用相同的getter/action/mutation，必须将它们标记为

namespaced:true

，否则将引发错误

---

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

要使用它，我们可以将模块名称空间字符串作为第一个参数传递给帮助程序，以便使用该模块作为上下文完成所有绑定。上述内容可简化为：

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

---

默认情况下，Vuex在全局命名空间中注册所有getter和操作。随着Vuex模块的大量增加，全局Vuex命名空间将面临冲突。名称空间方法可以解决这个问题。命名空间模块将不会在全局命名空间中注册。相反，它在特定模块

名称空间下可用

考虑具有两个模块产品和购物车的示例

//产品模块
导出默认值{
名称空间：对，
声明：{
产品：[]
},
吸气剂：{
产品（州）{
返回状态。产品
}
},
行动：{
异步加载（上下文，参数）{…}
},
突变：{
产品（状态、数据）{…}
}
}

另一个模块具有类似的getter和action

//购物车模块
导出默认值{
名称空间：对，
声明：{
产品：[]，
购物车：[]
},
吸气剂：{
产品（状态）{return state.products}
购物车（状态）{return state.cart}
},
行动：{
异步加载（上下文，参数）{…}，
异步集（上下文，参数）{…}，
},
突变：{
产品（状态、数据）{…}，
购物车（状态，数据）{…}
}
}

产品
和
购物车
模块都有一个共同的getter产品和操作负载。如果您使用这样一个没有名称空间的模块，它将产生问题。在模块的根目录中设置
namespaced:true
，有助于恢复这种情况

您可以使用命名空间将getter映射为
…mapGetters（['products/products']）
，这同样适用于
mapActions