Vue组件中TypeError: this.$store is undefined问题求助

问题 #

在Login.vue组件中调用this.$store.dispatch触发登录逻辑时，出现如下报错：

[Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.$store is undefined"

已自行排查以下内容，但问题仍未解决：

• 组件未使用箭头函数，确保this指向Vue实例
• auth.js模块已正确引入主store文件
• store已通过export default new Vuex.Store({..})完成导出，并在main.js中导入，同时尝试过非默认导出和解构导入的写法
• 尝试将主store文件重命名为index.js并直接导入整个store文件夹
• 已在异步逻辑中添加async/await关键字
• 已安装vuex依赖

相关代码 #

main.js #

import router from './router'
import Vue from 'vue'
import App from './App.vue'
import Vuelidate from 'vuelidate'
import { FirebaseApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getDatabase } from "firebase/database";
import store from './store'

Vue.use(Vuelidate)

initializeApp({
...
})

new Vue({
  store,
  router,
  render: function (h) { return h(App) },
}).$mount('#app')

src/store/index.js #

import Vue from 'vue'
import Vuex from 'vuex'
import auth from './auth'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  modules: {
    auth,
  }
})

src/store/auth.js #

import { FirebaseApp } from "firebase/app"

export default {
  actions: {
    async login({dispatch, commit}, {email, password}) {
      try {
        await firebase.auth().signInWithEmailAndPassword(email, password)
      } catch (e) { throw e }
    }
  },
}

src/views/empty/Login.vue #

<script>
import {email, required, minLength} from 'vuelidate/lib/validators'

export default {
  name: 'login',
  data: () => ({
    email: '',
    password: ''
  }),
  validations: {
    email: {email, required},
    password: {minLength: minLength(8), required}
  },
  methods: {
    async SubmitHandler() {
      if (this.$v.$invalid) {
        this.$v.$touch()
        return
      }
      const formData = {
        email: this.email,
        password: this.password
      }
      try {
        await this.$store.dispatch('login', formData)
      } catch (e) {throw e}
    }
  }
}
</script>

解决方案 #

1. 修正Firebase模块化调用错误 #

auth.js中直接使用firebase.auth()属于旧版SDK写法，当前使用的是模块化Firebase SDK，需修改为正确的实例调用方式：

// src/store/auth.js
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";

export default {
  actions: {
    async login({dispatch, commit}, {email, password}) {
      try {
        const authInstance = getAuth();
        await signInWithEmailAndPassword(authInstance, email, password)
      } catch (e) { throw e }
    }
  },
}

2. 确认store注入的正确性 #

• 检查import store from './store'的路径是否正确，确保store文件夹下存在index.js且导出正常
• 确认Vue实例创建时的store选项拼写无误（注意是小写s）
• 若组件通过路由加载，检查路由配置是否正确，确保组件挂载在根Vue实例的上下文下

3. 排查第三方插件干扰 #

暂时禁用Vuelidate等第三方插件，测试this.$store是否能正常访问，逐步排查是否有插件修改了Vue原型导致注入失败

4. 验证Vuex安装顺序 #

确保Vue.use(Vuex)在创建Vuex.Store实例之前执行（当前store/index.js中的写法已满足，无需修改）

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