如何为现有Vue 2.6.14项目添加Vuex并解决devtools检测不到问题

1. 确认将store注入到根Vue实例 #

这是最容易遗漏的配置项，不同Vue版本注入方式不同：

• Vue 2 + Vuex 3 版本
  在项目入口main.js中导入store后，传入Vue构造函数参数：

// main.js 示例
import Vue from 'vue'
import App from './App.vue'
import store from './store' // 路径对应你的store.js文件位置

new Vue({
  store, // 必须传入该参数完成注入
  render: h => h(App)
}).$mount('#app')

• Vue 3 + Vuex 4 版本
  在项目入口main.js中通过use方法注册store：

// main.js 示例
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

const app = createApp(App)
app.use(store) // 必须调用该方法完成注册
app.mount('#app')

2. 确认store.js的导出和插件注册逻辑正确 #

Vue 2 版本store.js校验 #

必须先调用Vue.use(Vuex)再实例化Store，且默认导出实例：

// store.js 示例
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 缺失该行会导致store无法挂载

export default new Vuex.Store({
  state: { test: 1 },
  mutations: {},
  actions: {},
  getters: {}
})

Vue 3 版本store.js校验 #

必须使用createStore方法生成实例并默认导出：

// store.js 示例
import { createStore } from 'vuex'

export default createStore({
  state: { test: 1 },
  mutations: {},
  actions: {},
  getters: {}
})

注意：如果你使用的是命名导出（export const store = ...），则main.js导入时需要使用import { store } from './store'的语法，匹配导出方式。

3. 开发者工具兼容排查 #

• 确认Vue DevTools为最新版本，旧版本对Vuex 4的兼容性存在缺陷
• 开发环境下不要开启生产模式，生产模式下DevTools会默认禁用Vuex检测，检查是否存在app.config.productionTip = true或者手动设置process.env.NODE_ENV = 'production'的配置
• 重启DevTools面板或者刷新页面，插件加载滞后会偶发检测失败的问题
• 如果上述配置都正确，重启本地开发服务（webpack/vite服务），热更新偶发会导致store实例丢失

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