为页面上的每个 Vue 实例分离 Vuex

Question

我正在页面上实例化多个 Vue 应用程序：

import Vue from "vue";
import App from "./App.vue";
import useStore from "./store";

const arr = [1, 2];
for (const index of arr) {
  const store = useStore();

  new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount(`#app$_{index}`);
}

我的商店文件如下所示：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

import address from "./modules/address";

export default function useStore() {
  return new Vuex.Store({
    modules: { address }
  });
}

和地址模块：

const state = {
  address: null
};

const getters = {
  address(state) {
    return state.address;
  }
};

const mutations = {
  setAddress(state, address) {
    state.address = address;
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations
};

但是商店似乎在页面上的所有 Vue 实例之间共享。为什么，当我为每个 Vue 应用程序创建一个新实例时？

谢谢

Answer 1

问题不在于 Vuex 存储在多个 Vue 实例之间共享，实际上是地址模块的状态在多个 Vuex 存储之间共享。

Vuex 文档解决了这个问题：https://vuex.vuejs.org/guide/modules.html#module-reuse

If we use a plain object to declare the state of the module, then that state object will be shared by reference and cause cross store/module state pollution when it's mutated.

只需将您的地址模块状态声明从普通对象定义更改为函数定义即可：

const state = () => ({
  address: null
});

一切顺利！

为页面上的每个 Vue 实例分离 Vuex

Separated Vuex for each Vue instance on the page

javascript

vue.js

vuex

vuejs2