Vue：如何在一个Composable中更新另一个的响应式数据

问题根源 #

每次调用useComposableB()都会生成独立的状态实例，useComposableA内部调用useComposableB()得到的varB，和组件中单独调用useComposableB()得到的varB是两个完全无关的响应式变量，因此调用setVarB只会修改useComposableA内部的那一份varB，组件无法感知到变化。

修复方案 #

1. 修改useComposableB，返回响应式变量本身

export const useComposableB = () => {
    const varB = ref(null);
    const setVarB = (data) => {
        varB.value = data;
    };
    // 同时返回varB，让组件可以直接绑定
    return {
        varB,
        setVarB
    };
};

2. 让useComposableA接收外部传入的setVarB

避免在useComposableA内部重新创建useComposableB实例，而是复用组件中创建的实例：

export const useComposableA = (setVarB) => {
    const methodA = () => {
        // 替换为实际axios请求
        axios.get().then(res => setVarB(res.data));
    };

    return {
        methodA
    };
};

3. 组件中统一管理组合式实例

<script setup>
import { onMounted } from "vue";
import { useComposableA } from "../composableA";
import { useComposableB } from "../composableB";

// 先创建useComposableB实例，拿到共享的varB和setVarB
const { varB, setVarB } = useComposableB();
// 将setVarB传入useComposableA，确保操作的是同一个varB
const { methodA } = useComposableA(setVarB);

onMounted(() => {
    methodA();
});
</script>

<template>
    <!-- 现在可以直接绑定varB，能实时更新 -->
    <div>{{ varB }}</div>
</template>

额外说明 #

如果需要在多个组件或组合式函数中共享同一个varB状态，可以考虑将useComposableB设计为单例模式，但要注意单例状态会在全局共享，适合全局状态场景：

// useComposableB.js
let instance = null;

export const useComposableB = () => {
    if (instance) return instance;

    const varB = ref(null);
    const setVarB = (data) => {
        varB.value = data;
    };

    instance = { varB, setVarB };
    return instance;
};

这种情况下，不管在哪里调用useComposableB()，都会拿到同一个varB实例，无需手动传入setVarB。

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