将Vuex模块拆分为同一命名空间中的多个文件

Question

我正在尝试将我的Vuex模块拆分成块。除了创建多个名称空间模块(namespaced: true(之外，我还想扩展变得非常长的全局模块。在某些情况下，似乎更倾向于将我的一些操作/突变保留在全局模块中，因为它们相互通信并且过于耦合，但在我看来，每次需要执行操作或突变时使用{ root: true }选项感觉不够好。因此，在我的情况下，不将namespaced设置为true听起来是一个完美的解决方案。

但是。。。

首先，似乎没有命名空间的模块无法容纳自己的state。此外，当他们试图使用传递给操作/突变的state时，他们失败了，因为他们不能直接与根状态通信(只是使用rootState参数，这不是我所期望的(。

我能想到的另一个可能的解决方案是像这样初始化我的Vuex商店：

export default new Vuex.Store({
namespaced: true,
state: {},
getters: {},
mutations: {},
actions: {
...actionsFromFile1,
...actionsFromFile2
}
});

但这种解决方案似乎还不是最好的。我还缺少其他解决方案吗？

Answer 1

您可以为单独的模块使用单独的文件：https://vuex.vuejs.org/guide/structure.html

Answer 2

您应该在模块中保留您的操作和突变。

正如您所提到的，您可以使用root来调度其他模块的操作。为什么你应该使用这个，很简单。可见性-如果您需要从另一个存储中调度一个操作，请将其保存在您期望的模块中，将代码拆分为全局存储和模块将很难跟踪内容的来源。

此外，你的全球商店将不断增长，以后你将很难找到你想要的东西。

简单的例子：

// message.js
const actions = {
add({ dispatch }, message) {
dispatch("chat/initializeChat", {}, { root: true });
// add message or something
},
};