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

image 1

image 2

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

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

  },
2
Vincent 30 Апр 2020 в 21:51

2 ответа

Лучший ответ

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

 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
    }

  },
2
Katinka Hesselink 1 Май 2020 в 08:50

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

2
Hamza Kchichine 30 Апр 2020 в 23:30