Vue 3 - 类型 'Ref<boolean>' 不可分配给类型 'boolean'

Question

我有一个自定义挂钩，其中有一个本地状态：但似乎，当我使用 toRefs() 导出状态并使用状态是另一个组件时，我收到错误消息：“类型 'Ref' 不可分配给类型 'boolean'”

钩子：

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
  };
}

我使用状态和出现 TS 编译错误的组件：

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

为什么 TS 编译器报错？我已经在 Hook 中定义了它是一个布尔值？

Answer 1

您应该可以访问 .value :

 state.isLoading = isLoading.value;

因为toRefsreturns一个ref

Vue 3 - 类型 'Ref<boolean>' 不可分配给类型 'boolean'

Vue 3 - Type 'Ref<boolean>' is not assignable to type 'boolean'

typescript

vue.js

vuejs3

vue-composition-api