页面上每个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-再利用

如果我们使用普通对象来声明模块的状态，那么该状态对象将通过引用共享，并在其突变时导致跨存储/模块状态污染。

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

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

你可以走了！