如何在同一页面为每个VueJS2应用实例配置独立Vuex Store

核心思路 #

当前问题出在app.vue中静态绑定了单一Store实例，导致所有<my-app>组件共享同一状态。临时方案的关键是让每个组件实例在初始化时生成专属的Store，无需修改现有Vuex模块结构。

具体实现步骤 #

1. 修改app.vue的Store注入逻辑

移除原本静态声明的store选项，改为在组件的beforeCreate钩子中动态创建并注入独立Store：

// app.vue
export default {
  // 移除原有静态绑定的 store: createStore()
  beforeCreate() {
    // 每个实例初始化时生成全新的Store实例
    this.$store = createStore();
  },
  /* 原有的data、methods、computed等选项保持不变 */
}

2. 兼容性验证

你原本使用的mapState/mapGetters/mapMutations等Vuex辅助函数，默认会从组件实例的$store属性读取状态，因此无需修改这些代码——它们会自动适配当前实例的独立Store。

方案优势（对比动态注册模块） #

• 无需重构现有Vuex模块结构，所有原有的state、mutations、actions、getters可完全复用
• 仅需修改组件初始化逻辑，改动范围极小
• 每个自定义元素实例自动拥有隔离的独立状态，满足多实例部署需求

注意事项 #

• 确保createStore函数每次调用都返回全新的Vuex.Store实例（你的现有代码已满足该要求）
• 若组件中存在依赖$store的created钩子逻辑，因beforeCreate执行时机更早，不会出现状态未初始化的问题

内容的提问来源于stack exchange，提问作者Ziga Petek