Vue.js集成Vuex时出现Cannot read property '$store' of undefined错误的原因咨询

咱们一步步排查你遇到的问题，先从最可能的根源说起：

1. Store导入方式错误（最可能的原因） #

看你的store.js，你用的是命名导出：

export const store = new Vuex.Store({ ... })

但在main.js里，你用的是默认导入：

import store from './util/store.js';

这种情况下，store变量其实是undefined——因为你的模块没有默认导出，只有一个名为store的命名导出。根Vue实例没拿到有效的store实例，自然没法把它注入到子组件里，所以组件中this.$store就会不存在。

解决方案：
两种方式二选一即可：

• 修改main.js的导入方式，使用命名导入：

  import { store } from './util/store.js';
  

• 或者把store.js的导出改成默认导出：

  // store.js里调整为
  export default new Vuex.Store({ ... })
  

2. this指向丢失 #

如果上面的问题解决后还是报错，要检查submitReg方法的调用方式是否导致this指向偏离组件实例：

• 如果你在模板里用了箭头函数绑定事件，比如：

  <button @click="() => submitReg()">提交</button>
  

  箭头函数会继承外部作用域的this，而非组件实例，在严格模式下就会变成undefined。改成直接绑定方法名即可：

  <button @click="submitReg">提交</button>
  

• 如果方法内部嵌套了普通函数，也要注意this指向问题，比如：

  async submitReg() {
    someCallback(function() {
      console.log(this.$store) // 这里的this不是组件实例
    })
  }
  

  可以改成箭头函数，或者提前保存组件实例的引用：

  async submitReg() {
    const vm = this;
    someCallback(() => {
      console.log(vm.$store)
    })
  }
  

3. 组件未挂载到根Vue实例的组件树中 #

如果你的reg.vue是通过new Vue({ ... })单独挂载的，而非作为根组件（App）的子组件存在，那它不会继承根实例的store。要确保reg.vue是在App组件或其子组件中被使用的。

4. 冗余的Vuex注册（次要优化点） #

你的store.js和main.js都调用了Vue.use(Vuex)，这属于冗余代码——虽然不会直接导致当前错误，但可以删掉main.js里的import Vuex from 'vuex'和Vue.use(Vuex)，因为已经在store.js里完成了注册。

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