在 VueJS 项目上使用 Vuex 得到错误“TypeError: this.$state is undefined”

Question

The goal is auth the user from Firebase and store the state using Vuex, when app is opened I use the state to know if user is logged in, and use it to more actions. I need get a state to populate a variable on data() method on App.vue file, but it apparentely not getting the correct reference. When the page is loaded the follow error occurs:

[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
    }
  }
})

Answer 1

You should already have something like this to initialize vue and vuex

import Vue from 'vue'
import App from './App' // src/App.vue
import store from './store' // store/index.js

Vue.use(store)

new Vue({ store, render: h => h(App) }).$mount('#app') // notice the "store" attribute here

So in component, it should be available in this.$store.state

And also, as @skirtle has pointed out, use computed if you want it to reactive with vuex

computed: {
  isLoggedIn () {
     return  this.$store.getters.user != null // remove .state
     // or you can use the state directly
     // return  this.$store.state.user != null
  }
}

In vuex, you should make change to state with a mutation. I see you already have setUser

setUser(state, payload) {
  state.user = payload // change this.user to state.user
},

you can then change the state in component with this.$store.commit('setUser', this.user)

And I see you have made an action setUserAction to do 3 commits, so you can just call it in component with this.$store.dispatch('setUserAction', this.user)