typescript - Vue 3 - Typ 'Ref' kan inte tilldelas typen 'boolean'

Jag har en anpassad hook, där jag har ett lokalt tillstånd: Men det verkar som att när jag exporterar tillståndet med toRefs() och använder tillståndet i en annan komponent, får jag felet: "Typ 'Ref' kan inte tilldelas typ 'boolean'"

Kroken:

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

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

  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),
    fetchData
  };
}

Komponenten där jag använder tillståndet och där jag får TS-kompileringsfelet:

setup() {
    const state: StateModel = reactive({
      data: null,
      isLoading: true
    });

    const { data, isLoading, fetchData } = useAxios(
      '/test_data/campaign.json',
      {}
    );

    const getCampaignData = async () => {
      await fetchData();
      state.data = data as CampaignModel;
      state.isLoading = isLoading; // ERROR HERE: Type 'Ref<boolean>' is not assignable to type 'boolean'
    };

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

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

Varför är det så att TS-kompilatorn klagar? Jag har redan definierat i Hooken att det är en boolean?

Svar #1

Du bör få åtkomst till .value :

 state.isLoading = isLoading.value;

eftersom toRefs returnerar en ref

Relaterade artiklar