在 VueJS 项目上使用 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://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>

存储/索引.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

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(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)在组件中调用它