vue3 获取数据钩子

Question

我有一个自定义挂钩来获取如下所示的数据：

import { reactive } from 'vue';
import axios from 'axios';

interface State {
  isLoading: boolean;
  isError: boolean;
  errorMessage: string,
  data: object|null
}

export default function useAxios(url: string, data: object) {
  const state = reactive({
    isLoading: true,
    isError: false,
    errorMessage: '',
    data: null
  }) as State;

  const fetchData = async () => {
    try {
      const response = await axios({
        method: 'GET',
        url: url, // '/test_data/campaign.json'
        data: data
      });
      state.data = response.data;
    } catch (e) {
      state.isError = true;
      state.errorMessage = e.message;
    } finally {
      state.isLoading = false;
    }
  };

  return {
    toRefs(state), //TS complains over "Parameter 'state' implicitly has an 'any' type." But it's already typed in the above???
    fetchData
  };
}

我试图在我的自定义组件中使用它，但我一直得到未定义的数据，即使如果我在我的自定义钩子中执行 console.log() 可以看到数据，我调用端点并记录回应...

我想这样使用它

setup() {
    const state = reactive({
      data: null
    });
    const {data, isLoading, fetchData} = useAxios(
      '/test_data/campaign.json',
      {}
    );
    const getCampaignData = async () => {
      await fetchData();
      console.log('data', data);
      state.data = data;
    };

    onMounted(() => {
      getCampaignData();
    });

    return {
      data: state.data
    };
  }

我在这里做错了什么？在钩子中，response.data 有来自 JSON 文件的数据，但是在我的组件中从钩子中调用数据时，它是 null ？

Answer 1

在可组合函数中尽量不要传播状态，因为它失去了反应性，您可以使用toRefs 返回反应性参考：

import {reactive,toRefs} from 'vue';
import axios from 'axios';

export default function useAxios(url: string, data: object) {
....
  return {
    ...toRefs(state),
    fetchData
  }
}

然后在您的组件中调用 getCampaignData 函数之外的可组合函数，例如：

import {reactive,toRefs,onMounted} from 'vue';
setup() {
    const state = reactive({
      data: null
    });
 const { data, isLoading, fetchData } = useAxios(
        '/test_data/campaign.json',
        {}
      );
    const getCampaignData = async () => {
     
      await fetchData();
      
      state.data = data.value;
    };

    onMounted( ()=>{
        getCampaignData();
    })

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