我正在将 Vue 集成到表单网站上,这意味着如果页面上有多个表单,我必须创建该 Vue 应用程序的多个实例。所有实例共享同一个 Vuex 存储。
我创建了一个 Vuex 模块,以便每个 Vue 实例都可以拥有自己的本地状态。我的主要目标是防止一个 Vue 实例更新另一个 Vue 实例的状态。
这是我的 Vuex 模块
export default {
state() {
return {
stateObj: {...}
}
}
}
创建我的 Vuex 实例:
export default new Vuex.Store({
modules: {
form
}
})
我正在阅读 Vuex 文档,它说你需要使用一个返回模块状态的函数,这就是我正在做的事情。但是,当我更新一个 Vue 实例中的模块状态时,它会更新所有其他 Vue 实例的模块状态。
这是section https://vuex.vuejs.org/guide/modules.html#module-reuse在我提到的 Vuex 文档中。
发生这种情况的原因是您并没有真正创建多个实例form
模块或您的商店。您本质上是在创建 Vue 应用程序的多个实例,也就是说,您有多个根 Vue 实例.
但是,您的商店代码明确表明您正在通过导出如下实例来创建 Vuex 商店的单个实例:export default new Vuex.Store({ /**/ }).
如果您有多个根实例,即多个 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
生成多种表格。同样,在商店方面,您将有一个数组来维护所有表单的集合。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)