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

Question

目标是从 Firebase 验证用户并使用 Vuex 存储状态，当应用程序打开时，我使用状态来了解用户是否已登录，并将其用于更多操作。 我需要一个状态来填充 App.vue 文件上data() 方法的变量，但它显然没有得到正确的引用。加载页面时出现以下错误：

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

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

你应该已经有了这样的东西来初始化 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 所指出的，如果您希望它与 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) 在组件中调用它