Vue3组合式API：登录后Navbar组件未重渲染问题求助

一、先消除Vue警告 #

你的Navigation.vue模板里<Slide>标签存在语法错误，当前写法会导致Vue解析失败，触发无效watch源的警告：

<!-- 错误写法 -->
<Slide
</Slide>

<!-- 修正为正确闭合 -->
<Slide></Slide>

二、修复Navbar不响应登录状态变化的问题 #

1. 恢复Navigation组件的响应式关联 #

在Navigation.vue的setup中，直接赋值const user = store.state.user会丢失响应式——reactive对象的单独属性不具备响应式特性。需要用toRef包装：

// Navigation.vue script部分
import { toRef } from 'vue' // 新增导入
// ...
setup() {
  const router = useRouter();
  const user = toRef(store.state, 'user') // 替换原来的直接赋值
  // ...
}

之后模板中使用user.value访问用户数据，或者直接在模板里写store.state.user，无需通过user变量。

2. 移除无效的:key绑定（可选） #

你在App.vue中绑定的:key="state"完全无效，因为store.methods.setUser()没有返回值，state变量实际是undefined。如果确实需要强制Navbar重渲染，可以改用一个跟踪登录状态变化的计数器：

// App.vue script部分
import { ref, watch } from 'vue' // 确保导入watch
// ...
setup() {
  // ...
  const navKey = ref(0)
  // 监听用户状态变化，更新计数器
  watch(() => store.state.user, () => {
    navKey.value++
  }, { immediate: true })
  // ...
  return { appReady, navKey } // 返回navKey
}

然后在模板中绑定：

<Navigation :key="navKey" />

注意：如果已经修复了Navigation组件的响应式问题，这个强制更新的:key其实是多余的，组件会自动响应store.state.user的变化。

三、清理冗余代码 #

App.vue中重复调用了store.methods.setUser(user)，直接删除冗余的那一行即可：

// 原代码
const user = JSON.parse(localStorage.getItem("BJJFocusUser"))
const state = store.methods.setUser(user) // 这行没用，直接删除
if (!user) {
  // ...
} else {
  store.methods.setUser(user); // 保留这行即可
  // ...
}

四、验证效果 #

1. 登录后，store.state.user会被正确赋值
2. Navigation组件通过响应式的user变量（或直接访问store.state.user）能实时获取用户状态，自动重渲染
3. 警告会因模板语法修正而消失

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