页面中为每个Vue实例创建独立Vuex Store却出现状态共享的原因排查

兄弟，你思路其实是对的——用工厂函数useStore()每次返回新的Store实例，本来应该是各用各的状态，但问题出在你的address模块上，是个典型的JavaScript引用类型坑！

核心问题：模块的state是共享的对象引用 #

你看你address模块里的state是这么写的：

const state = { address: null };

在JS里，对象是引用类型，就像你把同一个盒子分给了所有人，不管谁往盒子里放东西，所有人打开看到的都是同一个盒子里的内容。你每次调用useStore()创建新Store时，都是把这个同一个state对象塞给新Store，那所有Store自然就共享状态了啊！

不信你可以测试下：在第一个Vue实例里把address改成“北京”，第二个实例里改成“上海”，然后打印两个store的state，会发现最后俩都是“上海”——因为它们改的是同一个对象。

解决方法很简单：把state改成函数返回 #

Vuex模块允许我们把state定义成一个函数，每次创建Store实例时，都会调用这个函数生成全新的state对象，这样每个Store都有自己的“专属盒子”了。修改你的address模块：

// 把state从直接定义对象，改成函数返回新对象
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实例，每个实例的Store状态就是完全独立的了，互相不会影响。

顺便提一嘴 #

其实Vuex官方文档里早就说过这事：如果要让模块在多个Store实例间保持状态独立，必须用函数返回state，这种场景包括服务端渲染、多个Vue应用实例共存的情况，刚好就是你现在的场景～

内容的提问来源于stack exchange，提问作者o..o