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

Question

我有一个自定义钩子，其中我有一个本地状态:但似乎，当我用toRefs()导出状态，并使用状态是另一个组件时，我得到了错误:"类型'Ref'不能分配给类型'布尔'">

钩:

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编译器在抱怨?我已经在钩子中定义了它是布尔值?

Answer 1

您应该可以访问.value:

state.isLoading = isLoading.value;

因为toRefs返回ref