多个Vue实例需要多个Vuex模块实例

Question

我正在将Vue集成到一个表单网站上，这意味着如果页面上有多个表单，我必须创建Vue应用程序的几个实例。所有实例共享相同的Vuex存储。

我创建了一个Vuex模块，这样每个Vue实例都可以有自己的本地状态。我的主要目标是防止一个Vue实例更新另一个Vue实例的状态。

这是我的Vuex模块

export default {
  state() {
    return {
      stateObj: {...}
    }
  }
}

创建我的Vuex实例：

export default new Vuex.Store({
  modules: {
    form
  }
})

我正在阅读Vuex文档，它说你需要使用一个返回模块状态的函数，这就是我正在做的。但是，当我在一个Vue实例中更新模块状态时，它会更新所有其他Vue实例的模块状态。

以下是我所指的Vuex文档中的部分。

Answer 1

发生这种情况的原因是，您没有真正创建表单模块或存储的多个实例。实际上，您正在创建多个Vue应用程序实例，也就是说，您有多个根Vue实例。

但是，您的商店代码清楚地表明，您正在通过导出一个实例来创建Vuex商店的单个实例，例如：导出默认的新Vuex。存储({ /**/ }).

如果您有多个根实例，即多个Vue应用程序，那么您需要Vuex存储的多个实例。你的代码应该是这样的：

// store.js - Note: Do not return singleton store
export default function makeStore() {
  return new Vuex.Store({
    modules: { form }
  });
}

// main.js/root.js
import makeStore from './store.js';

// Creating multiple instances of root instance and Vuex store.
const app1 = new Vue({ store: makeStore() });
const app2 = new Vue({ store: makeStore() });

这应该能解决你的问题。尽管这种设计并不少见，但你还是应该退一步思考一下——如果你需要在所有这些应用程序之间共享数据，该怎么办？由于存在多个实例，因此您无法轻松完成此操作。只要所有这些形式都是独立工作的，就应该是好的。

另一方面，如果你真的要制作你的商店的单一实例，那么考虑改变你的商店设计。您应该有一个根实例/应用程序，并使用v-for生成多个表单。类似地，在存储端，您将有一个数组来维护所有表单的集合。