Vue生命周期内如何正确展示Vuex Store中的数据？

问题原因 #

• 核心原因为authenticated状态与user数据的更新时序不同步：身份认证通过后，通常会先触发修改authenticated为true的操作，之后才会将接口返回的用户数据异步写入Vuex的state.user，两个状态更新存在时间差。当authenticated已经切换为true时，state.user还未完成赋值仍为空对象，此时模板直接访问getUser.attributes会返回undefined，继续访问first_name就会抛出运行错误。
• 若Vuex初始化时仅给state.user赋值空对象，未预先定义attributes属性，也会提升这类访问报错的出现概率。

修复方案 #

方案1：使用可选链做空访问防护（成本最低） #

Vue 3 原生支持可选链语法，Vue 2 可安装对应Babel插件兼容，直接在模板层规避空访问报错：

<li v-if="authenticated">
    Hello, {{ getUser?.attributes?.first_name }}
</li>

方案2：调整模板判断条件 #

将用户数据是否存在加入渲染判断逻辑，确保访问时数据已完成赋值：

<li v-if="authenticated && getUser?.attributes">
    Hello, {{ getUser.attributes.first_name }}
</li>

方案3：优化Vuex状态更新逻辑 #

调整认证通过后的状态提交逻辑，保证authenticated和user数据在同一个Mutation中同步更新，消除两个状态的更新时间差：

// Vuex Mutation 示例
SET_AUTH_INFO(state, { authenticated, userInfo }) {
  state.authenticated = authenticated
  state.user = userInfo
}

// 认证接口请求成功后一次性提交完整状态
commit('SET_AUTH_INFO', {
  authenticated: true,
  userInfo: await fetchUserInfo()
})

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