Question

我最近刚开始使用vuex。

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

有人能以更好的方式对命名空间进行一些说明吗？ 何时/为什么使用它？

非常感谢。

Answer 1

当你有一个包含非常大的状态对象的大应用时，你会经常将其分配到modules。

这基本上意味着你将状态分解成更小的部分。其中一个警告是，您不能为模块使用相同的方法名称，因为它已集成到相同的状态，例如：

fill()

因此，为了启用此功能，您可以选择将模块定义为命名空间，然后您可以在不同的模块中使用相同的方法：

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，可能会使事情变得复杂，因为getter现在的格式为mapActions

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

Answer 2

默认情况下，Vuex在全局命名空间中注册所有 getters ， actions 。随着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模块均具有吸气剂产品和动作 load 。如果使用这样的模块而没有命名空间，则会产生问题。在模块的根目录中放置namespaced: true有助于恢复这种情况。

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

Answer 3

我不是vue.js的专家，但正如我在文档中看到的那样，命名空间可用于修改模块的getters / actions / mutation的路径访问权。

默认使用namespaced：false所有的getter，actions，mut都可以通过不同的模块获得，所以如果你想在不同的模块中使用相同的getter / action / mutation，你必须将它们标记为namespaced：true，否则为错误将被抛出。

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

HIH

Answer 4

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

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

vuex中模块的命名空间究竟是什么

4 个答案: