时间戳

首页 > 解决方案 > Vuex：硬刷新期间数据有时会“未定义”

vuejs2 - Vuex：硬刷新期间数据有时会“未定义”

问题描述

我是第一次使用 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...

在我调用这个 getter 的页面上是这样的：

IssueDetail.vue 模板：

   <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'])
  }

标签： vuejs2vuex

解决方案

这个

getStatusById(issue.status).name

无法使用问题道具的默认值。更改您的默认值或更改 getStatusById 以便它可以接受 null 或 undefined 作为输入参数，或者将模板中的表达式更改为：

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

推荐阅读