如何从外部JS文件访问当前加载的Vue Store？多Webpack入口场景

当然可行！完全不需要把三个Store合并成一个对象，你可以利用Vue的全局原型挂载特性，完美适配你多入口、多独立Store的场景。

具体实现步骤 #

在每个入口对应的init.js文件中，创建好当前入口专属的Store后，直接将其挂载到Vue的原型上：

// 某一个入口的 init.js 文件
import Vue from 'vue'
import specificStore from './path-to-your-specific-store' // 引入当前入口对应的Store

// 将当前Store挂载到Vue原型
Vue.prototype.$store = specificStore

// 后续正常初始化Vue实例
new Vue({
  store: specificStore, // 这里仍需传入Store，保证组件内this.$store可用
  render: h => h(App)
}).$mount('#app')

在外部.js文件中访问Store #

完成挂载后，在当前入口bundle的任何外部.js文件里，只要引入Vue，就能通过Vue.prototype.$store访问到当前入口对应的Store：

// 比如你的工具类文件 utils.js
import Vue from 'vue'

export function getAppConfig() {
  // 直接访问当前入口的Store状态
  return Vue.prototype.$store.state.app.someValue
}

关键注意事项 #

• 多入口隔离性：因为你用Webpack多入口打包，每个bundle的运行环境是独立的，所以每个入口挂载的$store只会作用于当前bundle的代码，不会和其他入口的Store产生冲突，刚好匹配你的需求。
• 组件内访问兼容：组件内依然可以通过this.$store正常访问Store，和之前的使用方式完全一致，不需要额外修改。
• 避免全局混淆：不要尝试在不同入口之间共享同一个Store实例，你的多Store设计本身就是为了隔离不同入口的状态，保持这种隔离性更合理。

这样就能实现你想要的、类似Vue.$store的访问方式，同时保留三个独立Store的设计。

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