如何在Vue 3组合式API中跟踪外部文件的数据变化

你遇到的核心问题是：外部文件导出的loggedIn是普通JavaScript变量，并非Vue的响应式对象。Vue的watch只能监听响应式数据（如ref、reactive）的变化，普通变量的修改无法被Vue感知；同时初始赋值给loginStatus只是一次性操作，后续外部修改loggedIn时不会同步更新loginStatus。

下面提供几种可行的解决方案：

方案一：将外部变量改为Vue响应式对象（推荐） #

直接在外部文件中用Vue的ref包装变量，导出响应式对象，导入后可直接使用或监听。

修改System.js： #

import { ref } from 'vue';
export const loggedIn = ref(false);

修改App.vue： #

<template>
  <div v-if="loginStatus"> ... </div>
</template>

<script>
import { loggedIn } from "./snippets/system";
import { watch } from 'vue';

export default {
  setup() {
    init();
    // 直接使用响应式的loggedIn，或赋值给loginStatus均可
    const loginStatus = loggedIn;

    // 监听loggedIn的变化（可选）
    watch(loggedIn, (currentValue) => {
      // 执行你的业务逻辑
    });

    return {    
      loginStatus      
    };
  },
};
</script>

后续外部修改状态时，需通过loggedIn.value = true（ref在JS中需访问.value），此时Vue会自动更新视图，watch也会触发。

方案二：用自定义订阅模式适配普通变量 #

如果无法将外部变量改为响应式，可以封装修改方法并添加订阅机制，手动通知状态变化。

修改System.js： #

export let loggedIn = false;
const subscribers = [];

// 封装修改状态的方法，通知所有订阅者
export function setLoggedIn(value) {
  loggedIn = value;
  subscribers.forEach(callback => callback(value));
}

// 提供订阅状态变化的方法
export function subscribeToLoginStatus(callback) {
  subscribers.push(callback);
  // 立即触发一次，同步当前状态
  callback(loggedIn);
}

修改App.vue： #

<template>
  <div v-if="loginStatus"> ... </div>
</template>

<script>
import { subscribeToLoginStatus } from "./snippets/system";
import { ref } from 'vue';

export default {
  setup() {
    init();
    const loginStatus = ref(false);

    // 订阅状态变化，同步到loginStatus
    subscribeToLoginStatus((currentValue) => {
      loginStatus.value = currentValue;
      // 执行你的业务逻辑
    });

    return {    
      loginStatus      
    };
  },
};
</script>

后续修改状态必须调用setLoggedIn(true)，才能触发订阅回调更新Vue中的状态。

方案三：使用Pinia/Vuex全局状态管理（适合复杂项目） #

如果项目中有多个组件需要共享登录状态，推荐用Pinia（Vue3官方推荐）或Vuex做全局状态管理，天然支持响应式。

创建Pinia Store（stores/auth.js）： #

import { defineStore } from 'pinia';

export const useAuthStore = defineStore('auth', {
  state: () => ({
    loggedIn: false
  }),
  actions: {
    setLoggedIn(value) {
      this.loggedIn = value;
    }
  }
});

修改App.vue： #

<template>
  <div v-if="loginStatus"> ... </div>
</template>

<script>
import { useAuthStore } from './stores/auth';
import { computed, watch } from 'vue';

export default {
  setup() {
    init();
    const authStore = useAuthStore();
    
    // 用computed映射状态，或直接使用authStore.loggedIn
    const loginStatus = computed(() => authStore.loggedIn);

    // 监听状态变化（可选）
    watch(() => authStore.loggedIn, (currentValue) => {
      // 执行你的业务逻辑
    });

    return {    
      loginStatus      
    };
  },
};
</script>

其他组件修改状态时，只需调用authStore.setLoggedIn(true)即可，所有使用该状态的组件会自动更新。

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