Nuxt中根据用户登录状态渲染元素异常：登录后需刷新且报错

1. 修复"Cannot read properties of null (reading 'user')"渲染错误 #

该错误是因为模板尝试读取null对象的user属性导致的，可通过两种方式解决：

• 添加可选链操作符：在模板中给user的访问路径加上可选链，避免空值访问报错：

<div v-if="!$store.state?.user">
    <button class="btn btn-light me-md-2 m-1" type="button">Login</button>
</div>
<div v-else>
    <button class="btn btn-light me-md-2 m-1" type="button">You logged</button>
</div>

• 初始化Vuex状态：在Vuex的store中给user设置明确的初始值，确保$store.state.user的上级对象不会为null：

// store/index.js
const state = {
  user: null // 显式初始化user为null
}

2. 解决登录后需刷新才更新的问题 #

登录后组件未自动刷新，核心原因是没有通过Vuex的mutation修改状态（直接修改state无法触发响应式更新），需按以下步骤调整：

• 通过mutation更新用户状态：登录成功后，必须调用commit触发mutation修改state：

// store/index.js
const mutations = {
  SET_USER(state, userInfo) {
    state.user = userInfo
  }
}

const actions = {
  // 示例登录逻辑
  async login({ commit }, credentials) {
    const loginRes = await api.login(credentials)
    commit('SET_USER', loginRes.data.user)
  }
}

• 用computed属性封装用户状态：在组件中通过computed属性获取用户状态，确保组件能自动响应state的变化：

<template>
  <div v-if="!currentUser">
    <button class="btn btn-light me-md-2 m-1" type="button">Login</button>
  </div>
  <div v-else>
    <button class="btn btn-light me-md-2 m-1" type="button">You logged</button>
  </div>
</template>

<script>
export default {
  computed: {
    currentUser() {
      return this.$store.state.user
    }
  }
}
</script>

3. 异步初始化用户状态（可选） #

如果通过本地存储保存登录态，可在App.vue的created钩子中触发action拉取用户信息，避免页面初始渲染时的状态不一致：

<script>
export default {
  created() {
    const token = localStorage.getItem('auth_token')
    if (token) {
      this.$store.dispatch('fetchUserInfo') // 调用action获取已登录用户信息
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者João Denari