多个 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 文档，它说您需要使用 returns 模块声明的函数，这正是我正在做的。但是，当我在一个 Vue 实例中更新模块状态时，它会更新所有其他 Vue 实例的模块状态。

这是我所指的 Vuex 文档中的 section。

Answer 1

发生这种情况的原因是您并没有真正创建 form 模块或商店的多个实例。您实质上是在创建 Vue 应用程序的多个实例，也就是说您有多个 Root Vue 实例.

但是，您的商店代码清楚地表明您正在通过导出如下实例来创建 Vuex 商店的单个实例：export default new Vuex.Store({ /**/ }).

如果您有多个根实例，即多个 Vue 应用程序，那么您需要 Vuex Store 的多个实例。您的代码类似于：

// 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() });

这应该可以解决您的问题。尽管这种设计并不少见，但您仍然应该退后一步思考——如果您需要在所有这些应用程序之间共享数据怎么办？由于有多个实例，您不能轻易做到这一点。只要所有这些形式都在孤立地工作，就应该没问题。

或者，如果您必须真正创建商店的单一实例，请考虑更改您的商店设计。您应该有一个根 instance/app 并使用 v-for 生成多个表单。同样，在商店端，您将有一个数组来维护所有表单的集合。

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

Need multiple instances of Vuex module for multiple Vue instances

vue.js

vuex

vuex-modules