Vue3自定义hook不同组件之间数据互相影响的问题

在使用自定义hook的时候,发现不同组件使用了同样的hook,会导致后面组件之间的数据会互相影响。请问大家在复用自定义hook的时候有遇到过这个问题么,是如何解决的呢?

代码案例:

const state = reactive({
  data: [],
  loading: false,
  errorMsg: "",
});

export default function useXX() {
  const fetchData = async () => {
    try {
      state.loading = true;
      state.data = await apixxx(`url`);
      state.loading = false;
    } catch (error) {
      state.loading = false;
      state.errorMsg = `fetch data failed.`;
    }
  };

  return {
    ...toRefs(state),
    fetchData,
  };
}

state 放在外面(对象)就是全局状态,放在函数内部定义,就不会相互影响了。

牛牛牛,的确是这样,谢啦 ~