跳转到内容

10 分钟上手

安装

npm i @iostore/store @iostore/vue vue nuxt

最小可复制示例

import { useQuery } from '@iostore/vue';

export function useDashboardQuery() {
  return useQuery({
    key: ['dashboard'],
    queryFn: ({ signal }) => $fetch('/api/dashboard', { signal }),
    cancelOnDispose: true,
  });
}

<script setup lang="ts">
const { data: initial } = await useAsyncData('dashboard', () => $fetch('/api/dashboard'));
const dashboard = useDashboardQuery();

if (initial.value && !dashboard.data.value) {
  dashboard.query.setData(initial.value);
}
</script>

<template>
  <p v-if="dashboard.state.value.isLoading">Loading...</p>
  <pre v-else>{{ dashboard.data.value }}</pre>
</template>

状态分支渲染建议

首屏加载：使用 isLoading（或等价状态）。
后台刷新：使用 isFetching（或观察者 fetchStatus）。
错误态：直接展示可诊断信息，不要吞掉 error。

取消语义（AbortSignal）

queryFn 必须透传 signal 到 fetch / 请求客户端。
把取消当作控制流，不当作业务失败弹窗。
页面快速切换场景启用取消（cancelOnUnmount / cancelOnDispose / cancelOnUnsubscribe）。

复制后需要改的 3 处

把示例 key 改成业务域 key（例如 users -> orders）。
把请求 URL 与返回类型改成项目真实接口。
把重试、取消策略调成你的页面交互强度。

相关 API

下一步

导航