Vue2+Vuex3中this.$store未定义问题求助及最优方案咨询

问题根源 #

你碰到的报错是因为main.js里同时配置了template和render选项，导致根实例的store未正确注入App组件。

Vue2中，若根实例同时存在render和template，render会优先执行，但你额外添加的template: '<App/>'和components: { App }相当于手动实例化了一个未关联根store的App组件，所以App.vue里访问this.$store会返回undefined。而手动设置Vue.prototype.$store = store是把store挂载到全局原型链，所有组件都能通过原型访问，所以能正常运行，但这并非Vuex推荐的标准用法。

最优修复方案 #

修改main.js，删除冗余的template和components配置，只保留render函数即可：

import Vue from 'vue'
import router from './router.js'
import VueRouter from 'vue-router'
import App from './App.vue'
import Vuex from 'vuex'
import store from './store.js'

Vue.use(Vuex)
Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

修改后，根实例会通过render正确渲染App组件，Vuex会自动将store注入所有子组件，App.vue里就能正常使用this.$store，无需手动挂载到原型。

额外说明 #

Vuex官方规范是在根Vue实例中注册store选项，内部会自动完成子组件的store注入。手动挂载原型属于冗余操作，不符合规范，复杂场景下可能引发意外问题，不建议使用。

内容的提问来源于stack exchange，提问作者Phạm Tiến Hải