Vuex 存储状态在控制台中未定义，但 Vue 工具显示工作正常

Question

我想在网络中显示我的 getter，但在 console.log 中我有未定义的错误。但是在 vue 开发工具中，我的 getter 正在工作。

我的组件代码：

export default {
data: () => ({
  items: [
    { text: 'Real-Time', icon: 'mdi-clock' },
    { text: 'Audience', icon: 'mdi-account' },
    { text: 'Conversions', icon: 'mdi-flag' },
  ],
}),
computed: {
  Question(){
    return this.$store.getters.getQuest
  }
},
methods: {
  Next(){
    this.$store.commit('incrementIndex')
  }
},

}

这是我的 vuex :

 export default new Vuex.Store({
  state: {
    question: [],
    index: 0
  },
  getters: {
    getQuest: state => {
      let a = state.question[state.index]
      let answer = [...a.incorrect_answers, a.correct_answer]
      return {
        question: a,
        answer: answer
      }
    }

  },

Answer 1

您收到未定义的错误，因为最初 question 是一个空数组。所以 state.question[state.index] 基本上是 undefined 然后你试图访问属性 incorrect_answers 的 undefined 这将不起作用并且会给出 undefined 错误

Answer 2

在getter中您需要检查是否所有信息都已加载。所以我大致会这样做：

 export default new Vuex.Store({
  state: {
    question: [],
    index: 0
  },
  getters: {
    getQuest: state => {
      let a = state.question[state.index]
      if (a){
       let answer = [...a.incorrect_answers, a.correct_answer]
       return {
        question: a,
        answer: answer
       }
      } else {
       return null
    }

  },

Vuex 存储状态在控制台中未定义，但 Vue 工具显示工作正常

Vuex stores state is undefined in console, but Vue tool is showing that are working properly

vue.js

vue-cli