Vue3父组件监听Store异步数据失效问题排查

核心问题点 #

1. Store 响应式失效
   你在 store 里把 ref 放在了普通对象 state 中，并且直接返回这个普通对象。由于普通对象不是响应式的，即使内部的 ref 值变化，组件也无法追踪到这些变化。

2. 组件中未正确获取响应式引用
   你声明了 storeRef = storeToRefs(commonStore) 但并未使用，反而直接访问 commonStore.state——这个 state 是普通对象，watchEffect 无法感知其内部 ref 的值变化。同时你错误地使用了 state.value.data1.value 的访问方式，进一步导致响应式追踪失败。

修正方案 #

第一步：修复 Store 的响应式 #

把 state 用 reactive 包裹，让整个对象变为响应式；或者直接单独声明每个 ref 并返回，两种方式二选一即可：

方式一：使用 reactive 包裹 state

// store.vue
export const useCommonStore = () => {
  // 用 reactive 让 state 成为响应式对象
  const state = reactive({
    data1: null,
    data2: null,
    isDataLoaded: false,
  });

  const setData1 = (data: any) => {
    state.data1 = data;
  };

  const setData2 = (data: any) => {
    state.data2 = data;
  };

  const resolveIsDataLoaded = (data: any) => {
    state.isDataLoaded = data;
  };

  return {
    state,
    setData1,
    setData2,
    resolveIsDataLoaded
  };
};

方式二：单独声明每个 ref

// store.vue
export const useCommonStore = () => {
  const data1 = ref(null);
  const data2 = ref(null);
  const isDataLoaded = ref(false);

  const setData1 = (data: any) => {
    data1.value = data;
  };

  const setData2 = (data: any) => {
    data2.value = data;
  };

  const resolveIsDataLoaded = (data: any) => {
    isDataLoaded.value = data;
  };

  return {
    data1,
    data2,
    isDataLoaded,
    setData1,
    setData2,
    resolveIsDataLoaded
  };
};

第二步：修复组件中的响应式追踪 #

根据 Store 的修正方式，对应调整 App.vue 的代码：

对应方式一的组件代码

// App.vue
const commonStore = useCommonStore();
// 用 storeToRefs 解构出响应式的 state
const { state } = storeToRefs(commonStore);
const isLoad = ref(false);

watchEffect(() => {
  // state 是 ref，所以访问 state.value.data1（reactive 内部属性无需 .value）
  if (state.value.data1 !== null && state.value.data2 !== null) {
    isLoad.value = true;
    console.log('true', isLoad.value);
  } else {
    console.log('false', isLoad.value);
  }
});

对应方式二的组件代码

// App.vue
const commonStore = useCommonStore();
// 直接解构出响应式的 data1 和 data2
const { data1, data2 } = storeToRefs(commonStore);
const isLoad = ref(false);

watchEffect(() => {
  if (data1.value !== null && data2.value !== null) {
    isLoad.value = true;
    console.log('true', isLoad.value);
  } else {
    console.log('false', isLoad.value);
  }
});

关键原理 #

• Vue 3 的响应式依赖于 reactive 或 ref，普通对象无法触发响应式更新。
• storeToRefs 的作用是将 Store 返回的响应式属性转换为独立的 ref，确保组件能正确追踪其变化。

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