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

Question

我最近开始使用 vuex。

官方docs很好地解释了modules是什么，但我不确定我是否理解模块中的namespaces .

谁能以更好的方式阐明名称空间？ When/why要用吗?

非常感谢。

Answer 1

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

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

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']

的形式

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

Answer 2

我不是 vue.js 方面的专家，但正如我在文档中看到的那样，命名空间可用于修改对模块 getters/actions/mutations.

的路径访问

默认情况下 namespaced: false 所有的 getters、action、mutation 都可以在不同的模块中全局使用，所以如果你想在不同的模块中使用相同的 getter/action/mutation，你必须将它们标记为 namespaced: true，否则会报错。

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

Answer 3

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

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

Answer 4

默认情况下，Vuex在全局命名空间。随着 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){ ... }
    }
}

和另一个具有相似 getter 和操作的模块，

//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 模块都有一个 getter product 和 action load in常见的。如果你使用这样一个没有命名空间的模块，它会产生问题。这里在模块的根目录中制作 namespaced: true 有助于恢复这种情况。

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

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

What exactly is namespacing of modules in vuex

javascript

vue.js

vuex