Pinia 是 Vue 新的官方状态管理库，兼容 Vue2 和 Vue3，替代 VueX。而 Colada 就是 Pinia 的完美伴侣。

Colada 是专为 Vue 3 + Pinia 设计的智能数据获取层，通过 useQuery、useMutation 等组合式函数，将异步数据流转化为状态流，自动处理缓存、刷新、重试等逻辑。

核心优势

• 无缝集成 Pinia，查询结果直接存入 Store，可在 DevTools 中统一查看
• 自动处理 loading、error、缓存、重试、后台刷新等逻辑，告别样板代码
• 支持乐观更新和回滚，内置插件机制，逻辑可复用
• 体积仅约 2KB，TypeScript 支持完整，适合 Vue 项目深度集成
• 
  

功能介绍

• 直接集成到 Vue.js DevTools ，因此开发人员可以使用 Colada 而无需离开他们现有的 devtool 配置。
• 时间旅行调试。
• 用于查看 Vue 应用程序的 Pinia 状态的检查器面板。
• 一个 Chrome DevTool 扩展，提供相同的功能和增强的 UI。

安装：VueDevTools 插件

1. 确保已安装 Vue.js DevTools 扩展。
2. 在应用的根目录中安装 Colada npm 包：npm install colada-plugin --save-dev。
3. 将 Colada 添加到你的 Vue 应用程序。

import { createApp } from 'vue';  
import { createPinia } from 'pinia';  
import Colada, { PiniaColadaPlugin } from 'colada-plugin';  
import App from './App.vue';   
const app = createApp(App);  
const pinia = createPinia();  
app.use(pinia);  
pinia.use(PiniaColadaPlugin);  
app.use(Colada);  
app.mount('#app');

从 Chrome Web Store 安装

1. 按照上面的说明将 colada-plugin 添加到你的 Vue 应用程序中。
2. 导航到 Chrome Web Store 上的 Colada，然后单击添加到 Chrome 进行安装。

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4764