After doing extensive research and reading numerous similar questions on various platforms, I am still unable to resolve my issue.
I have a component containing a login form that triggers a method to dispatch a $store action for logging in the user via firebase.
The error message I encounter is
[Vue warn]: Error in v-on handler (Promise/async): "TypeError: this.$store is undefined"I have taken several steps to troubleshoot the problem:
- Avoided using fat arrow functions in components to ensure 'this' references the Vue instance
- Included the
auth.jsstore module in the mainstore.jsfile - Properly exported the store with
and imported it intoexport default new Vuex.Store({..})main.jsas
, trying other variations likeimport store from './store/store'export ...andimport {store} from './store/store - Attempted renaming the main store file from
store.jstoindex.jsand importing the whole folder asimport store from './store' - Applied async and await where necessary
- Confirmed vuex installation
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>