nuxt-jsonapi

輕鬆為 Nuxt 整合 JSON:API 客戶端

394 次下載•43 個星標•v3.0.0

patrickcate

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。

許可證

麻省理工學院許可證