nuxt-jsonapi
为 Nuxt.js 轻松集成 JSON:API 客户端。
版本 2.x 和 3.x 支持 Nuxt 3.x。
版本 1.x 支持 Nuxt 2.x
介绍
nuxt-jsonapi 为 Nuxt 添加了简易的 JSON:API 客户端集成。它是围绕出色的 Kitsu JSON:API 客户端的一个松散封装。
此模块全局注入一个 $jsonApi 实例，您可以使用 this.$jsonApi（选项 API）或 const { $jsonApi } = useNuxtApp()（组合式 API）在任何地方访问客户端。
设置
- 将
nuxt-jsonapi依赖项添加到您的项目
npm install nuxt-jsonapi
- 将
nuxt-jsonapi添加到nuxt.config.js的modules部分
{
modules: [
// Simple usage
'nuxt-jsonapi',
// With options
[
'nuxt-jsonapi',
{
baseURL: 'http://www.example.com/api',
/* other module options */
},
],
]
}
- 如果您未在第 2 步中传递选项，请在
nuxt.config.js中添加一个jsonApi对象来配置模块选项
export default {
modules: ['nuxt-jsonapi'],
jsonApi: {
baseURL: 'http://www.example.com/api',
/* other module options */
},
}
❗ 重要提示
如果您没有指定 baseURL 选项，则会使用默认的 /jsonapi URL。这几乎肯定不是您想要的，因此请务必正确设置它。
使用
有关客户端提供的所有功能，请参阅 Kitsu 的优秀文档。
您可以通过以下方式访问客户端
Options API
this.$jsonApi
示例
export default defineNuxtComponent({
async asyncData({ $jsonApi }) {
const { data } = await $jsonApi.get('/article')
return {
articles: data,
}
},
})
组合式 API
const { $jsonApi } = useNuxtApp()
示例
<script setup>
import { useNuxtApp, useAsyncData } from '#app'
const { $jsonApi } = useNuxtApp()
const { data: articles } = await useAsyncData(() => $jsonApi.get('/article'), {
transform: ({ data }) => data,
})
</script>
开发
- 克隆此仓库
- 使用
yarn install或npm install安装依赖项 - 使用
yarn dev或npm run dev启动开发服务器 - 使用
yarn test或npm run test运行自动化测试
- 运行
npm run dev:prepare以生成类型存根。 - 使用
npm run dev以开发模式启动 playground。
许可证
版权所有 (c) Patrick Cate