Vue中computed值不更新：登录状态切换未触发组件更新

你的计算属性无法自动更新，核心原因是auth.isUserLoggedIn()返回的是普通布尔值，而非Vue能追踪的响应式数据。Vue的computed依赖响应式状态的变化来触发重新计算，如果方法内部没有基于ref/reactive的响应式变量，computed就感知不到状态变化。

修正方案 #

1. 确保Auth模块返回响应式状态

如果是你自己实现的useAuthMethod，需要把登录状态用Vue的响应式API（ref/reactive）包裹，直接暴露响应式属性而非返回普通值的方法：

// ../../../auth/Auth.js
import { ref } from 'vue';

export async function useAuthMethod() {
  // 用ref定义响应式的登录状态
  const isLoggedIn = ref(false);

  // 初始化检查登录状态（比如从localStorage读取token）
  const initAuth = async () => {
    const token = localStorage.getItem('auth_token');
    isLoggedIn.value = !!token;
  };

  // 登录/登出方法，直接修改响应式状态
  const login = () => {
    localStorage.setItem('auth_token', 'your_token');
    isLoggedIn.value = true;
  };

  const logout = () => {
    localStorage.removeItem('auth_token');
    isLoggedIn.value = false;
  };

  await initAuth();

  // 暴露响应式属性和操作方法
  return {
    isLoggedIn,
    login,
    logout
  };
}

2. 组件中直接使用响应式属性

修改组件的<script setup>，直接访问Auth模块返回的响应式属性，computed会自动追踪其变化：

<template>
  <div class="container-fluid" v-if="isUserLoggedIn">
    <main-navigation/>
    <router-view />
    <MainFooter />
  </div>
  <div v-else>
    <router-view />
  </div>
</template>

<script setup>
import { computed } from "vue";
import MainNavigation from "./MainNavigation.vue";
import MainFooter from "../../common/MainFooter.vue";
import { useAuthMethod } from "../../../auth/Auth";

const auth = await useAuthMethod();
// 直接基于响应式属性创建computed
const isUserLoggedIn = computed(() => auth.isLoggedIn);
</script>

3. 若无法修改Auth模块的实现

如果useAuthMethod是第三方库或无法修改的代码，可以通过watchEffect监听登录状态的变化，手动更新本地响应式变量：

<script setup>
import { ref, watchEffect } from "vue";
import MainNavigation from "./MainNavigation.vue";
import MainFooter from "../../common/MainFooter.vue";
import { useAuthMethod } from "../../../auth/Auth";

const auth = await useAuthMethod();
const isUserLoggedIn = ref(auth.isUserLoggedIn());

// 监听可能触发登录状态变化的因素（比如localStorage变化、路由跳转）
watchEffect(() => {
  // 这里可以根据实际情况调整监听逻辑，比如定时检查或监听特定事件
  isUserLoggedIn.value = auth.isUserLoggedIn();
});
</script>

额外优化 #

你当前的代码混合了Options API和Composition API（两个<script>标签），可以合并为一个<script setup>，让代码更简洁统一，如上面的示例所示。

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