Plugins 插件

插件是 Nuxt.js 的扩展模块，可以在应用中使用。

.
└── plugins/
    ├── api.ts
    └── vue-query.ts

api.ts

创建 trpc 客户端，用于与服务端交互。 关于 trpc 的在服务端中的使用，详见 server 文档。

vue-query.ts

创建 @tanstack/vue-query 客户端。@tanstack/vue-query 可以在服务端渲染时预获取数据，并且内置了数据缓存、失败重试等功能。 详见 Vue Query 文档。

在本项目中，trpc 通常与 @tanstack/vue-query 一起使用，用于获取服务端数据。

以下是一个节选自本项目的例子：

~/components/group/SelectGroup.vue 
const { $api } = useNuxtApp(); // 导入 trpc 客户端
const userStore = useUserStore();

const queryClient = useQueryClient(); // 导入 vue-query 客户端
const { data: availableGroups, suspense: availableGroupsSuspense } = useQuery({
  queryKey: ['group.list', { classId: userStore.classId }],
  queryFn: () => $api.group.list.query({ classId: userStore.classId }),
}); // 用 vue-query 包装 trpc 请求
await availableGroupsSuspense();
index.vue
public