Vuex: данные иногда становятся неопределенными во время жесткого обновления

Question

Я впервые использую Vuex, и у меня периодически возникает проблема с консолью:

Error: TypeError: Cannot read property 'name' of undefined
Info: render

Есть идеи, как я могу решить эту проблему?

Вот мои настройки:

В Vuex (store. js) у меня есть такой геттер:

state: {
    statuses: []
  },
actions: {
    async fetchStatuses({ commit }) {
      try {
        const response = await ApiService.getStatusFlags()
        commit('SET_STATUSES', response.data)
      } catch (err) {
        console.error(err)
      }
    }
},
  getters: {
    getStatusById: state => id => {
      return state.statuses.find(status => status.id === id)
    },
    ...snip...

А на странице, где я звоню, этот геттер выглядит так:

IssueDetail. vue template:

   <span class="badge badge-success">{{ getStatusById(issue.status).name }}</span>

IssueDetail. vue секция скрипта:

import { mapGetters } from 'vuex'
export default {
  name: 'IssueDetail',
  data() {
    return {
      isBusy: true,
      issue_id: this.$route.params.id,
      issue: ''
    }
  },
  async created() {
    await this.getIssue()
    this.isBusy = false
  },
methods: {
    async getIssue() {
      try {
        this.issue = (await ApiService.getIssue(this.$route.params.id)).data[0]
      } catch (error) {
        console.error(error)
      }
    }
},
computed: {
    ...mapGetters(['getStatusById'])
  }

Answer 1

this

getStatusById(issue.status).name

не может работать со значением по умолчанию issue prop. Либо измените значение по умолчанию, либо измените getStatusById, чтобы он мог принимать значение null или undefined в качестве входного параметра, ИЛИ измените выражение в шаблоне на что-то вроде:

issue.status? getStatusById(issue.status).name : ''