Pinia Colada 使用教程

Pinia Colada 使用教程

pinia-colada 🍹 The smart data fetching layer for Pinia 项目地址: https://gitcode.com/gh_mirrors/pi/pinia-colada

1. 项目介绍

Pinia Colada 是一个基于 Pinia 的智能数据获取层，它使得在 Vue 应用程序中获取数据变得非常简单。Pinia Colada 移除了数据获取过程中的复杂性和模板代码。它是完全类型化的，支持按需加载，并且遵循与 Pinia 和 Vue 相同的原则：易于接近、灵活、强大，可以逐渐采用。

Pinia Colada 的特点包括：

• 自动缓存：智能的客户端缓存与请求去重
• 异步状态：处理任何异步状态
• 插件系统：强大的插件系统
• 乐观更新：轻松实现乐观更新
• 合理的默认值：合理的默认设置，完全可自定义
• 现成的插件：一组用于处理数据获取的可组合函数
• Typescript 支持：完全支持 Typescript
• 小型包体积：基础包体积约为 2kb，完全可按需加载
• 零依赖：除了 Pinia 之外没有其他依赖
• 服务器端渲染（SSR）支持：开箱即用的服务器端渲染支持

2. 项目快速启动

首先，您需要安装 Pinia 和 Pinia Colada：

npm install pinia @pinia/colada

然后，在您的 Vue 应用程序中设置 Pinia 和 Pinia Colada：

import { createPinia } from 'pinia'
import { PiniaColada } from '@pinia/colada'

const pinia = createPinia()
app.use(pinia)
app.use(PiniaColada)

接下来，使用 useQuery 和 useMutation 函数来读取和写入数据：

import { useRoute } from 'vue-router'
import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
import { patchContact, getContactById } from '~/api/contacts'

const route = useRoute()
const queryCache = useQueryCache()

const { data: contact, isPending } = useQuery({
  key: () => ['contacts', route.params.id],
  query: () => getContactById(route.params.id),
})

const { mutate: updateContact, isLoading } = useMutation({
  mutation: patchContact,
  async onSettled({ id }) {
    await queryCache.invalidateQueries({ key: ['contacts', id], exact: true })
  },
})

3. 应用案例和最佳实践

在组件中使用 useQuery 来获取数据：

<template>
  <section>
    <p v-if="isPending">Loading...</p>
    <ContactCard v-else :key="contact.id" :contact="contact" :is-updating="isLoading" @update:contact="updateContact" />
  </section>
</template>

确保在更新数据后使查询失效，以便重新获取最新数据：

async onSettled({ id }) {
  await queryCache.invalidateQueries({ key: ['contacts', id], exact: true })
}

4. 典型生态项目

Pinia Colada 是 Pinia 生态系统的一部分，可以与 Pinia 以及其他相关插件配合使用，例如 Pinia Nuxt 模块等。通过这种方式，您可以构建一个具有强大状态管理和数据获取能力的 Vue 应用程序。

pinia-colada 🍹 The smart data fetching layer for Pinia 项目地址: https://gitcode.com/gh_mirrors/pi/pinia-colada