My objective is to authenticate the user with Firebase and manage the state using Vuex. Upon opening the app, I utilize the state to determine if the user is logged in and perform various actions accordingly.
I am trying to retrieve a state to populate a variable within the data() method in the App.vue file; however, it seems that I am not referencing it correctly. When the page loads, the following error messages are displayed:
[Vue warn]: Error in data(): "TypeError: this.$state is undefined"
found in
---> <App> at src/App.vue
<Root>
and
[Vue warn]: Property or method "isLoggedIn" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <App> at src/App.vue
<Root>
App.vue
<template>
<v-app>
<router-view v-if="isLoggedIn"></router-view>
<login v-else />
</v-app>
</template>
<script>
import login from "@/views/Login";
export default {
name: "App",
components: {
login
},
data() {
return {
isLoggedIn: this.$state.getters.user != null
};
}
};
</script>
<style>
</style>
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: null,
status: null,
error: null
},
mutations: {
setUser(state, payload) {
this.user = payload
},
removeUser(state) {
this.user = null
},
setStatus(state, payload) {
this.status = payload
},
setError(state, payload) {
this.error = payload
}
},
actions: {
setUserAction({ commit }, payload) {
commit('setUser', payload)
commit('setStatus', 'success')
commit('setError', null)
}
},
modules: {
},
getters: {
status(state) {
return state.status
},
user(state) {
return state.user
},
error(state) {
return state.error
}
}
})