存储被 API 调用填充之前的未定义属性错误

Question

在我的子组件中，我试图访问存储状态对象（称为 template）的嵌套属性（称为 background_color）：

<template>
  <div
    class="btn"
    :style="{ 'background-color': backgroundColor }"
  >
    content
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      backgroundColor: state => state.template.button_branding.secondary_button.background_color
    })
  }
}
</script>

商店是从父视图组件中通过商店操作调用填充的：

created () {
  this.initializeStore()
},

在我的商店中，此操作是这样定义的：

export const actions = {
  initializeStore ({ state, commit }, data) {
    this.$axios.get('path.to.api.endpoint')
      .then((res) => {
        commit('setConfig', res.data) // populates store
      }).catch((error) => {
        console.log(error)
      })
  }
}

我收到此错误：

无法读取未定义的属性“secondary_button”

但我看到我的嵌套属性通过 Vue DevTools 填充在状态中。

我怎样才能避免这个错误？

Answer 1

您可以使用可选链接和空值合并来添加默认值，如下所示：

backgroundColor: state => state.template?.button_branding?.secondary_button?.background_color ?? 'default_value'

这应该可以防止调用 API 时出现错误。

此外，将您的逻辑移动到商店内的getter 中并在那里设置默认值可能会更简洁：

getters: {
  backgroundColor: state => {
    return state.template?.button_branding?.secondary_button?.background_color ?? 'default_value'`;
  }
}

这样组件就可以使用mapGetters，并且不需要关心是否使用了默认值。