Состояние хранилища Vuex в консоли не определено, но инструмент Vue показывает, что работает правильно

Question

Я хочу отобразить мои геттеры в сети, но в console.log у меня есть неопределенные ошибки. но в инструменте vue dev мои геттеры работают.

мой компонент код:

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

В геттере нужно проверить, загружена ли еще вся информация. Так что это примерно то, что я бы сделал:

 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
    }

  },

Answer 2

Вы получаете неопределенные ошибки, потому что изначально question - пустой массив. Итак, state.question [state.index] в основном undefined А затем вы пытаетесь получить доступ к свойству invalid_answers undefined, которое не будет работать и даст неопределенные ошибки