如何向已编译Vue2应用追加组件并访问Vuex Store数据？

针对你的需求，我分两部分来给你具体实现方案，都是基于已编译应用未暴露内部代码、但Vue/Vuex实例可全局访问的常见场景：

1. 向已编译Vue应用追加自定义组件 #

已编译的Vue应用通常会把Vue实例挂载到页面的某个元素（比如#app），并且如果是UMD打包方式，会将Vue对象暴露到全局window上。我们可以利用这一点来注册并挂载自定义组件：

步骤1：在页面中添加自定义组件的挂载点（可选） #

如果你希望自定义组件独立挂载，先在index.html里加一个空元素：

<!-- 核心应用的挂载点 -->
<div id="app"></div>
<!-- 自定义组件的挂载点 -->
<div id="custom-component-container"></div>

步骤2：注册并挂载自定义组件 #

在核心应用的script标签之后，添加你的自定义脚本：

// 注册全局自定义组件
Vue.component('my-custom-component', {
  template: `
    <div class="custom-box">
      <h4>这是追加的自定义组件</h4>
    </div>
  `
})

// 方式A：独立挂载到预留的容器
new Vue({
  el: '#custom-component-container',
  template: '<my-custom-component />'
})

// 方式B：插入到核心应用的DOM内部（如果需要）
// 先获取核心应用的根实例
const rootVm = document.querySelector('#app').__vue__
// 创建组件实例并挂载
const customVm = new Vue({
  render: h => h('my-custom-component')
}).$mount()
// 插入到核心应用的任意位置
rootVm.$el.appendChild(customVm.$el)

2. 在自定义组件内访问Vuex Store #

核心应用的Vuex Store会挂载在根实例的$store属性上，我们可以通过两种方式让自定义组件访问它：

方式1：直接通过根实例的$store访问 #

这种方式不需要额外传递，直接在组件内获取根实例的Store：

Vue.component('my-custom-component', {
  template: `
    <div class="custom-box">
      <h4>这是追加的自定义组件</h4>
      <p>Vuex中count的值：{{ currentCount }}</p>
      <button @click="addCount">点击加1</button>
    </div>
  `,
  computed: {
    currentCount() {
      // 通过根实例获取Store的状态
      return this.$root.$store.state.count
    }
  },
  methods: {
    addCount() {
      // 提交Store的mutation
      this.$root.$store.commit('increment')
    }
  }
})

方式2：将根Store传入自定义组件实例 #

这种方式让自定义组件和核心应用内的组件用法完全一致，直接用this.$store：

// 先获取核心应用的根Store
const rootVm = document.querySelector('#app').__vue__
const rootStore = rootVm.$store

// 注册组件
Vue.component('my-custom-component', {
  template: `
    <div class="custom-box">
      <h4>这是追加的自定义组件</h4>
      <p>Vuex中count的值：{{ currentCount }}</p>
      <button @click="addCount">点击加1</button>
    </div>
  `,
  computed: {
    currentCount() {
      // 和核心组件一样直接用this.$store
      return this.$store.state.count
    }
  },
  methods: {
    addCount() {
      this.$store.commit('increment')
    }
  }
})

// 挂载时传入根Store
new Vue({
  el: '#custom-component-container',
  store: rootStore, // 传入核心应用的Store
  template: '<my-custom-component />'
})

针对Vue 3的补充说明 #

如果你的已编译应用是Vue 3版本，获取实例和Store的方式略有不同：

// 获取Vue 3的根应用实例
const rootApp = document.querySelector('#app').__vue_app__
// 获取根Store
const rootStore = rootApp._store

// 注册并挂载组件
const MyCustomComponent = {
  template: `
    <div class="custom-box">
      <p>Vuex中count的值：{{ currentCount }}</p>
    </div>
  `,
  computed: {
    currentCount() {
      return this.$store.state.count
    }
  }
}

// 创建自定义应用并使用根Store
Vue.createApp(MyCustomComponent)
  .use(rootStore)
  .mount('#custom-component-container')

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