I did my research and read a bunch of similar questions there and on a dedicated Vue forum but none of them solve my issue.

I have a component with a login form that triggers a method that dispatches $store action that logs the user in via firebase.

The problem is that i get [Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.$store is undefined" Found in Login.vue so i figure $store is unavailable there for some reason.

I made sure that:

• I don't use fat arrow functions in components so that no new context is introduces and 'this' still refers to the Vue instance
• I included auth.js store module to the main store.js file
• I properly exported store export default new Vuex.Store({..}) and imported it into main.js import store from './store/store' and even tried variations of those such as export ... without default and import {store} from './store/store with curly braces
• Tried renaming main store file from store.js into index.js and importing the whole folder like import store from './store'
• Put async and await where needed
• I do have vuex installed

main.js file

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 component

<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>

CodePudding user response：

Always check versions of the packages you are working with. Remember that npm install WHATEVER in most cases defaults to installing the newest version which is not what you want when working with legacy code.

In my case i'm working with Vue 2 so i needed to use Vuex@3 instead of Vuex@4 and firebase-tools 6 or 7

uninstall current firebase tools npm uninstall -g firebase-tools

install legacy firebase (version 7 in this case) npm install [email protected]

install Vuex version 3 for you Vue 2 application npm i vuex@3