vuex中模块的命名空间到底是什么

Question

我最近开始使用 vuex 。

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

谁能以更好的方式阐明名称空间？ 何时/为何 使用它？

非常感激。

原文由 Abdullah Khan 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 可能会使事情变得有点复杂，因为吸气剂现在的形式为 ['moduleA/client']

所以只有在你真的需要的时候才使用它。

原文由 Tomer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

默认情况下，Vuex 会在 全局命名空间 中注册所有的 getter 和 action 。随着 Vuex 模块的大量增长，全局 Vuex 命名空间将面临冲突。命名空间方法应运而生以解决此问题。命名空间模块不会在全局命名空间中注册。相反，它在特定模块 namespace 下可用。

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

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

和另一个具有类似吸气剂和动作的模块，

 //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 模块都有一个共同的吸气 产品 和动作 _负载_。如果你使用这样一个没有命名空间的模块，它会产生问题。在模块的根目录中制作 namespaced: true 有助于恢复这种情况。

您可以使用命名空间将吸气剂映射为 ...mapGetters(['products/products']) 并且同样适用于 mapActions 。

原文由 Kiran Maniya 发布，翻译遵循 CC BY-SA 4.0 许可协议