Vue.js中Vuex Store配置异常：this.$store未定义的解决办法

核心原因：Vuex版本与Vue版本不兼容 #

你当前使用的Vue 2.6.14仅支持Vuex 3.x版本，而你安装的Vuex 4.1.0是专为Vue 3设计的，版本不匹配导致Vue无法将store实例挂载到全局原型上，因此this.$store返回undefined。

分步解决方案 #

1. 降级Vuex到兼容版本 #

执行以下命令卸载当前Vuex并安装适配Vue2的Vuex 3.x版本：

npm uninstall vuex
npm install vuex@3 --save

2. 修复store.js中mutations的语法错误 #

你的mutations函数存在两处关键错误：

• mutations的第一个参数是state，不能通过this访问状态
• addTitles函数中未指定state前缀直接引用titles

修改后的store.js代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        titles: []
    },
    mutations :  {
        addTitles(state, title){ // 第一个参数为state实例
            state.titles.push(title) // 明确访问state中的titles数组
        },
        removeTitle(state, title) {
            state.titles = state.titles.filter(data => data !== title)
        },
        checkExist(state, title){
            if(state.titles.includes(title)){
                console.log("already existed")
                return;
            }
        }
    }
})

3. 修正main.js的微小笔误 #

你的main.js已正确注入store，仅需修正render函数的参数名（官方约定为h，不影响功能但更规范）：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store, // 已正确注入store实例
  render: h => h(App),
}).$mount('#app')

验证修复 #

完成上述步骤后重启项目，App.vue的mounted钩子中console.log(this.$store)将正常输出store实例，不再返回undefined。

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