VueJS：父组件传递Vuex属性值到子组件，避免undefined报错

这个问题我之前也碰到过，本质是组件渲染时机早于Vuex数据初始化导致的——当组件第一次渲染时，$store.state.company.card_img还没被赋值（大概率是异步请求拉取数据还没返回），所以它是undefined，你直接访问[0].url自然会抛出Cannot read property '0' of undefined的错误。下面给你几种靠谱的解决办法：

1. 使用可选链操作符（最简洁） #

ES2020引入的可选链?.可以在属性不存在时自动返回undefined，而不会抛出错误，非常适合模板里的简单取值场景：

<card :image="$store.state.company.card_img?.[0]?.url" ></card>

这里card_img?.[0]会先判断card_img是否存在，存在才继续访问索引0；同理?.url会判断索引0的元素是否存在，再访问url。

2. 初始化Vuex State的默认值 #

从根源上避免card_img为undefined，在Vuex的state定义里给它设置一个空数组的默认值：

// Vuex store的state部分
state: {
  company: {
    card_img: [] // 初始化空数组，而不是undefined
  }
}

这样即使异步数据还没返回，card_img也是一个空数组，访问[0]会得到undefined，但不会触发TypeError。

3. 条件渲染（延迟渲染子组件） #

用v-if确保只有当card_img有数据时才渲染子组件，避免在数据未就绪时执行取值逻辑：

<card 
  v-if="$store.state.company.card_img?.length" 
  :image="$store.state.company.card_img[0].url" 
></card>

card_img?.length会判断数组是否存在且有元素，满足条件才渲染<card>组件。

4. 用计算属性封装取值逻辑 #

如果需要处理默认值或者更复杂的判断，把取值逻辑放到计算属性里，模板直接使用计算属性，代码更清晰易维护：

// 组件的computed选项
computed: {
  cardImageUrl() {
    const cardImg = this.$store.state.company.card_img
    // 如果数组存在且有元素，返回url；否则返回空字符串或默认图片地址
    return cardImg && cardImg.length > 0 ? cardImg[0].url : ''
  }
}

然后模板里：

<card :image="cardImageUrl" ></card>

这些方法都能有效规避渲染时的错误，你可以根据自己的场景选择最合适的方式~

内容的提问来源于stack exchange，提问作者DevonDahon