vue 在某些情况下数据使用前须判断是否有值

从商品列表到商品详情页时，要异步请求数据info，代码如下：

<div class="shop-header-discounts">
	<div class="discounts-left">
		<div class="activity" :class="supportClasses[info.supports[0].type]">
			<span class="content-tag">
				<span class="mini-tag">{{info.supports[0].name}}</span>
			</span>
			<span class="activity-content ellipsis">{{info.supports[0].content}}</span>
		</div>
	</div>
	<div class="discounts-right">{{info.supports.length}}个优惠</div>
<div>

运行时报如下错误：

原因是，info默认初始值为空对象，所以info.supports是undefined，此时不会报错，如果再info.supports[0]，那肯定会报如上错误。
所以当取state里的数据时一定要小心，如果初始值为空对象/数组，那么当点（“.”）两次及以上的时候，要加判断info是否有值，代码如下：

<div class="shop-header-discounts" v-if="info.supports">
	<div class="discounts-left">
		<div class="activity" :class="supportClasses[info.supports[0].type]">
			<span class="content-tag">
				<span class="mini-tag">{{info.supports[0].name}}</span>
			</span>
			<span class="activity-content ellipsis">{{info.supports[0].content}}</span>
		</div>
	</div>
	<div class="discounts-right">{{info.supports.length}}个优惠</div>
<div>

此外要注意，此时只能用v-if，不能用v-show，因为v-show还是会渲染的，只是隐藏不让看见