Vue2项目中从Vuex Store获取数据报错，如何解决？

先梳理你代码里的问题，逐一解决：

1. 修复App.vue的语法错误 #

你的App.vue代码未正确闭合export default对象，缺少结束的花括号，这会导致组件解析失败，进而引发Vuex相关报错。修改后的代码如下：

import { mapState } from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState({
      symbols: state => state.symbols
    }),
    // ...mapGetters(["getSymbols"]),
  }
}

2. 确认Vue与Vuex版本兼容 #

Vue 2.x 必须搭配 Vuex 3.x 使用，Vue 3.x 对应 Vuex 4.x，版本不匹配会直接导致DevTools报错。检查package.json里的依赖版本：

• 若使用Vue 2，确保Vuex版本为^3.6.2这类3.x版本
• 若误装了Vuex 4.x，执行卸载重装：

npm uninstall vuex
npm install vuex@3 --save

3. 验证Store注入规范 #

你的main.js已正确导入并注入store，可保持当前写法，也可调整为更清晰的顺序：

import Vue from 'vue'
import App from './App.vue'
import './index.css'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  el:'#app',
  render : h => h(App),
})

4. 重启项目与DevTools #

修改代码后重启本地开发服务器，同时关闭并重新打开Vue DevTools，清除缓存确保新配置生效。

完成以上操作后，DevTools的报错会消失，你可以在App.vue模板中通过{{ symbols }}正常获取state中的数据。

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