Получение ошибки «TypeError: this. $ Состояние не определено» с использованием Vuex в VueJS проекте

Question

Цель - авторизация пользователя из Firebase и сохранение состояния с помощью Vuex. Когда приложение открыто, я использую состояние, чтобы узнать, вошел ли пользователь в систему, и использую его для других действий. Мне нужно получить состояние для заполнения переменной в методе data() в файле App. vue, но, по-видимому, оно не получает правильную ссылку. При загрузке страницы возникает следующая ошибка:

[Vue warn]: Error in data(): "TypeError: this.$state is undefined"
found in

---> <App> at src/App.vue
       <Root>

и

[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://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <App> at src/App.vue
       <Root>

Приложение. 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>

магазин / индекс. 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

У вас уже должно быть что-то подобное для инициализации vue и 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

Таким образом, в компоненте оно должно быть доступно в this.$store.state

А также как @skirtle указал, используйте computed, если вы хотите, чтобы он реагировал с vuex

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

В vuex вы должны внести изменения в состояние с мутацией. Я вижу, у вас уже есть setUser

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

, после чего вы можете изменить состояние компонента с помощью this.$store.commit('setUser', this.user)

И я вижу, что вы выполнили действие setUserAction для выполнения 3 коммитов, поэтому Вы можете просто вызвать его в компоненте с помощью this.$store.dispatch('setUserAction', this.user)