在VueJS项目上使用Vuex遇到错误“ TypeError：this。$ state未定义”

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反应，请使用compute。>

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