Vue项目全局注册Vuex Store后无法访问state的问题

1. 版本兼容性检查 #

Vue2必须搭配Vuex 3.x，Vue3必须搭配Vuex 4.x，版本不匹配会直接导致全局注入的$store无法被组件识别。

• 查看当前依赖版本：在项目根目录执行

  npm list vue vuex
  

• 若版本不兼容，重新安装对应版本：
  Vue2+Vuex3：

  npm install vuex@3 --save
  

  Vue3+Vuex4：

  npm install vuex@4 --save
  

2. 确认组件归属 #

确保报错的组件是Vue根实例的子组件，如果是通过非Vue组件系统创建的独立实例（比如单独new Vue()且未传入store），或者在根实例挂载前就执行了访问$store的代码，都会导致this.$store未定义。

3. 优化代码写法（推荐） #

你当前用methods返回状态，每次组件渲染都会重新执行函数，改用计算属性会缓存结果，性能更优：

<template>
  <div>
    {{ appNumber }}
  </div>
</template>

<script>
export default {
  computed: {
    appNumber() {
      return this.$store.state.appNumber;
    }
  }
};
</script>

4. 验证根实例注入有效性 #

你的main.js和store代码看起来无语法问题，但可以在根实例中打印$store确认注入是否成功：

// main.js
new Vue({
  router,
  vuetify,
  store,
  render: h => h(App),
  created() {
    console.log(this.$store); // 打印出Vuex实例则说明注入成功
  }
}).$mount('#app')

如果以上步骤排查后仍有问题，可以尝试暂时禁用vuetify等第三方插件，测试是否是插件干扰了Vue实例的注入逻辑。

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