Nuxt3中useState布尔值在v-if与Vuetify组件中失效问题排查

问题根源 #

你在登录逻辑中错误地通过useState的初始化函数设置状态值，而不是直接修改Ref实例的value属性。useState的第二个参数仅在状态首次创建时执行，后续调用不会覆盖已有状态的值。

解决方案 #

1. 修正登录时的状态更新逻辑

不要用初始化函数更新状态，先获取共享状态的Ref实例，再直接修改其value：

function onSubmit(values: any) {
  const { data: token } = useFetch(REST_API_URL + '/auth/signin', { 
    method: "POST", 
    body: values 
  })

  watch(token, (newToken) => {
    if (newToken) {
      localStorage.setItem('token', newToken)
      // 获取共享状态Ref并修改值
      const isConnected = useState<boolean>('isConnected')
      isConnected.value = true
      const test = useState('test')
      test.value = 'test'
    }
    console.log('Login')
    console.log(newToken)
  }, {
    deep: true
    // 移除immediate: true，避免token未就绪时触发无效判断
  })
}

2. 给组件中的useState设置明确初始值

避免状态初始为undefined导致的判断异常，在组件中调用useState时指定默认值：

<template>
  <div>
    <v-sheet>
      <v-toolbar elevation="4" class="primary-color">
        <NuxtLink to="/">
          <img src="/images/logo.png"/>
        </NuxtLink>

        <v-toolbar-title>{{test}}  {{isConnected}} Application des commandes</v-toolbar-title>
        <v-spacer></v-spacer>

        <v-btn v-if="isConnected" v-text="'deconnect'" href="/login"></v-btn>
        <v-btn v-else v-text="'connect'" href="/login"></v-btn>

      </v-toolbar>
    </v-sheet>
  </div>
</template>

<script setup lang="ts">
// 初始值设为false，确保未登录时状态明确
const isConnected = useState<boolean>('isConnected', () => false)
const test = useState('test', () => '')

// 打印实际值而非Ref对象，便于调试
console.log('token')
console.log(isConnected.value)
</script>

3. 验证状态响应性（可选）

可以添加监听确认状态更新是否触发组件渲染：

watch(isConnected, (newVal) => {
  console.log('isConnected updated:', newVal)
})

为什么之前的写法不生效？ #

• 模板插值{{isConnected}}能显示值，是因为Vue模板会自动解包Ref对象，但Vuetify组件的v-if对未明确初始化的状态（比如undefined）判断逻辑更严格。
• 你之前调用useState('isConnected', () => true)时，若组件已提前创建该状态（初始为undefined），初始化函数不会执行，状态值从未真正更新为true，导致v-if判断失效。

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