多个Vue实例需要多个Vuex模块实例 [英] Need multiple instances of Vuex module for multiple Vue instances

问题描述

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

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

这是我的 Vuex 模块

出口默认{状态() {返回 {状态对象:{...}}}}

创建我的 Vuex 实例:

export default new Vuex.Store({模块:{形式}})

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

这是我指的 Vuex 文档中的部分.

解决方案

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

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

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

//store.js - 注意:不要返回单例存储导出默认函数 makeStore() {返回新的 Vuex.Store({模块:{表单}});}//main.js/root.js从 './store.js' 导入 makeStore;//创建根实例和 Vuex 存储的多个实例.const app1 = new Vue({ store: makeStore() });const app2 = new Vue({ store: makeStore() });

这应该可以解决您的问题.虽然这种设计并不少见，但您仍然应该退后一步思考 - 如果您需要在所有这些应用程序之间共享数据怎么办?由于有多个实例，您无法轻松做到这一点.只要所有这些表单都能独立工作，就应该没问题.

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

I'm integrating Vue onto a site for forms, which means I have to create several instances of that Vue application if there are multiple forms on the page. All instances share the same Vuex store.

I created a Vuex module so that each Vue instance could have it's own local state. My main goal is to prevent one Vue instance from updating the state of another Vue instance.

Here's my Vuex module

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

Creating my Vuex instance:

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

I was reading the Vuex docs and it says you need to use a function that returns the modules state, which is what I'm doing. However, when I update the module's state in one my Vue instances, it updates the all other Vue instance's module state.

Here's the section in the Vuex docs I am referring to.

解决方案

The reason this is happening is that you are not really creating multiple instances of form module or your store. You are essentially creating multiple instances of Vue applications, that is you are having multiple Root Vue Instances.

However, your store code clearly suggests that you are creating a single instance of Vuex store by exporting an instance like: export default new Vuex.Store({ /**/ }).

If you have multiple root instances i.e. multiple Vue applications, then you need multiple instances of the Vuex Store. Your code would be something like:

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

This should solve your problem. Though this design is not uncommon, you should still take a step back and think - what if you need to share data across all these apps? Since there are multiple instances, you cannot do that easily. As long as all these forms are working in isolation, it should be fine.

Alternately, if you have to really make single instance of your store, then consider changing your store design. You should have a single root instance/app and use v-for to generate multiple forms. Similarly, on the store side, you would have an array to maintain a collection of all the forms.

这篇关于多个Vue实例需要多个Vuex模块实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！