Vue3中如何将组合式函数的state值同步到Vue组件

首先确保你的组合式函数正确返回ref对象，而非ref的原始值，同时保证定时器逻辑不会破坏响应性。以下是修正后的完整实现方案：

1. 正确编写组合式函数 test.js #

import { ref, onUnmounted } from 'vue';

export function useStates() {
  const state = ref('not-started'); // 修正原拼写错误：not-satrted → not-started
  let timerIds = [];

  // 依次更新状态的逻辑
  const startStateUpdates = () => {
    // 清空旧定时器，避免内存泄漏
    timerIds.forEach(id => clearTimeout(id));
    timerIds = [];

    state.value = 'not-started';
    timerIds.push(setTimeout(() => state.value = 'started', 1000));
    timerIds.push(setTimeout(() => state.value = 'processing', 2000));
    timerIds.push(setTimeout(() => state.value = 'successful', 3000));
  };

  // 组件卸载时清理定时器
  onUnmounted(() => timerIds.forEach(id => clearTimeout(id)));

  // 返回ref对象和启动方法
  return { state, startStateUpdates };
}

2. 在Vue组件中正确调用 #

<template>
  <div>
    当前状态：{{ state }}
    <button @click="startStateUpdates">启动状态更新</button>
  </div>
</template>

<script setup>
import { useStates } from './test.js';

const { state, startStateUpdates } = useStates();

// 可选：组件挂载后自动启动更新
// import { onMounted } from 'vue';
// onMounted(() => startStateUpdates());
</script>

关键注意事项 #

• 必须返回ref对象：若原代码返回的是state.value而非state，组件拿到的是普通字符串，无法响应后续变化。
• 禁止替换ref对象：始终通过修改state.value更新状态，不要直接重新赋值state = ref(...)，这会切断原有的响应式关联。
• 清理定时器：使用onUnmounted清理定时器，避免组件卸载后仍执行无效更新导致内存泄漏。

若你的原代码已返回ref对象但仍不生效，检查是否在定时器逻辑中错误地重新创建了ref，或存在其他覆盖响应式引用的代码。

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