data-loader-vue3
简化Vue 3异步数据加载的通用组件，自动管理加载、错误和状态。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：data-loader-vue3。 它的用途是：简化Vue 3异步数据加载的通用组件，自动管理加载、错误和状态。 完整的 Skill 内容见：https://321skill.com/skills/data-loader-vue3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在开发一个Vue 3的管理后台，需要展示用户列表，并支持搜索和分页。如何优雅地处理数据加载的loading和错误状态？” 它会建议你使用DataLoader组件，将搜索关键词和页码作为`hash`，将调用后端API的函数作为`loadData`。这样，每次搜索或翻页时，组件会自动触发数据加载并管理所有中间状态，你只需专注于渲染最终的数据列表。
介绍
在Vue 3前端开发中，处理异步数据加载时，开发者常常需要手动管理加载状态、错误捕获、数据刷新等逻辑，导致代码重复且难以维护。DataLoader组件封装了这些通用逻辑，通过声明式配置即可实现数据的自动加载与状态管理。
使用时，开发者只需提供用于标识数据版本的hash属性和异步数据获取函数loadData。组件会在挂载或hash变化时自动触发加载，并处理过程中的异常。它还支持通过filter函数对原始数据进行处理，并通过作用域插槽将加载状态、数据和重新加载方法暴露给父组件，实现灵活的UI定制。
该组件非常适合需要频繁与后端API交互、数据依赖状态变化（如分页、筛选条件）的Vue 3前端开发者。无论是构建管理后台、数据仪表盘还是内容型应用，都能显著提升开发效率。
建议在项目中结合Ant Design Vue的Alert组件使用以显示错误信息。注意，该组件主要处理数据加载的通用流程，对于复杂的缓存策略或数据转换，可能需要在loadData或filter函数中自行实现。
核心特点
与简单的加载状态组件不同，它深度集成了Vue 3的响应式系统，通过`hash`属性自动感知数据依赖变化并触发重载；同时，它通过依赖注入（provide/inject）将`reload`方法提供给子孙组件，实现了跨层级的便捷数据刷新控制。
注意事项
不适合需要复杂缓存策略、离线数据同步或与特定状态管理库（如Pinia）深度绑定的场景。
常见问题
如何手动触发数据重新加载？
通过作用域插槽提供的`reload`函数，调用`reload(false)`可强制重新加载当前数据。
如何根据不同的参数加载数据？
可以通过动态改变`hash`属性的值（如页码、筛选条件组合）来触发加载，或使用`loadDataArgs`向`loadData`函数传递参数。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/data-loader-vue3/raw/index.md 读取 data-loader-vue3 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/data-loader-vue3/raw/index.md（查看排版版本）