Vue.js（Nuxt）中结合$auth仅当信息存在时展示内容的报错问题

• 你的v-if判断逻辑会从左到右逐级读取属性，当$auth.$storage.state.user未初始化（值为undefined）时，尝试读取它的email属性会直接抛出报错，这一过程发生在v-if判断执行阶段，所以无法靠现有逻辑规避错误。
• Vue模板中访问实例属性不需要加this前缀，属于多余写法。

方案1：逐级校验属性存在性 #

先判断user对象存在后，再校验email属性：

<template>
  <div>   
     <Navbar/>
     <p v-if="$auth.$storage.state.user && $auth.$storage.state.user.email"> {{ $auth.$storage.state.user.email }}&nbsp;</p>
  </div>
</template>

方案2：使用可选链运算符（兼容Vue 2.7及以上、所有Vue 3版本） #

可选链运算符会在读取到undefined属性时自动终止，不会抛出错误，写法更简洁：

<template>
  <div>   
     <Navbar/>
     <p v-if="$auth.$storage.state.user?.email"> {{ $auth.$storage.state.user.email }}&nbsp;</p>
  </div>
</template>

方案3：通过计算属性提前处理逻辑 #

把状态读取逻辑放到计算属性中，简化模板代码，同时降低重复读取的性能开销：

// 组件script部分
export default {
  computed: {
    userEmail() {
      return this.$auth.$storage.state.user?.email || ''
    }
  }
}

<!-- 组件template部分 -->
<p v-if="userEmail"> {{ userEmail }}&nbsp;</p>

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