Nuxt Composition API ドキュメント抄訳 #Vue.js

ドキュメント

useContext

Composition API中のNuxtコンテキストにアクセスできます。

useContext はNuxtのコンテキストを返します。これを使うことでNuxtコンテキストにより容易にアクセスできます。

import { defineComponent, useContext } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { store } = useContext()
    store.dispatch('myAction')
  },
})

route、 query、 from および params はリアクティブなref（.value でアクセスできる）ですが、それ以外のコンテキストは異なることに注意してください。

Nuxt 3へのアップグレードをスムーズにするため、 it is recommended not to access route, query, from および params には useContext からアクセスせずに useRoute ヘルパー関数を使うことが推奨されます。

useAsync

一度だけ走ってクライアントサイドでデータを維持する非同期関数を定義できます。

useAsync を用いて非同期通信に依存するリアクティブな値を作成できます。

サーバー上では、このヘルパーは非同期通信の結果をHTMLに埋め込み、またクライアントモードに自動的に注入します。asyncData とまったく同様に、クライアントサイドで非同期通信を再び走らせません。

しかしながら、SSRで通信が実行されなければ（たとえば初期ロードの後でページを遷移した場合）、非同期通信が解決されたときにその結果を埋めるような null のrefを返します。

import { defineComponent, useAsync, useContext } from '@nuxtjs/composition-api'

export default defineComponent({
  setup() {
    const { $http } = useContext()
    const posts = useAsync(() => $http.$get('/api/posts'))

    return { posts }
  },
})

そのとき、 useAsync は1回限りの用途にのみ適しており、その限りでユニークなキーを提供します。詳しい情報.

useFetch

Composition APIの中でNuxtのfetch()フックにアクセスできます。

v2.12よりも新しいNuxtのバージョンは、サーバーサイドとクライアントサイドの非同期データフェッチングが可能な fetch と呼ばれるカスタムフックをサポートしています。

このパッケージでは以下のようにアクセスできます：

import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const name = ref('')

    const { fetch, fetchState } = useFetch(async () => {
      name.value = await axios.get('https://myapi.com/name')
    })

    // Manually trigger a refetch
    fetch()

    // Access fetch error, pending and timestamp
    fetchState

    return { name }
  },
})

useFetch は setup() の中で同期的に呼ばれなければなりません。コンポーネントのdataに対して、つまり、setup() から 返却される プロパティに対してなされるいかなる変更も、クライアントに送られ直接読み込まれます。useFetch フックのその他の副作用は後に残りません。

$fetch と $fetchState はインスタンスにすでに定義されています。つまり、setupからfetch や fetchState を返却する必要はありません。

useFetch は onGlobalSetup の中で使えないことに注意してください。

useStatic

サイト生成時に静的なJSONを作り出す非同期通信を定義できます。

useStatic を使って処理コストの高い関数をあらかじめ走らせることができます。

import {
  defineComponent,
  useContext,
  useStatic,
  computed,
} from '@nuxtjs/composition-api'
import axios from 'axios'

export default defineComponent({
  setup() {
    const { params } = useContext()
    const id = computed(() => params.value.id)
    const post = useStatic(
      id => axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`),
      id,
      'post'
    )

    return { post }
  },
})

SSG

もしアプリ全体を生成する（あるいは単にいくつかのルートを nuxt build && nuxt generate --no-build でプリレンダリングする）なら、以下の挙動が解禁されます：

生成時、 useStatic で呼んだ結果はJSONファイルに保存され、 /dist ディレクトリの中にコピーされます。
生成されたページのハードリロード時、JSONはページにインラインで埋め込まれ、キャッシュされ、キャッシュされます。
生成されたページへのクライアント遷移時、このJSONはフェッチされます。一度フェッチされると、後続の遷移のためにキャッシュされます。ページが事前に生成 されていなかった 時など、いかなる理由でこのJSONが存在しないような場合も、オリジナルの生成関数はクライアントサイドで走ります。

もしアプリ内でいくつかのページを事前に生成するなら、generate.interval を増やす必要があることに注意してください。（setupの説明を参照。）

SSR

もしルートが事前に生成されていないなら（devモードの場合を含む）：

ハードリロード時、サーバーは生成関数を走らせ、nuxtState の結果をインラインで埋め込みます。クライアントがAPIリクエストを再び走らせることのないようにするためです。結果は次のリクエストまでの間キャッシュされます。
クライアント遷移時、クライアントは生成関数を走らせます。

どちらの場合も、 useStatic が返す結果は null のrefで、生成関数やJSONフェッチが解決されたとき、その結果によって埋められます。

onGlobalSetup

グローバルなNuxtのsetup()関数で関数（またはdata）を走らせます。

グローバルなsetup関数でコールバック関数を走らせます。

import { onGlobalSetup, provide } from '@nuxtjs/composition-api'

export default () => {
  onGlobalSetup(() => {
    provide('globalKey', true)
  })
}

componentコンテキストの中ではなくpluginの中で呼ばないといけません。

Nuxt Composition API ドキュメント抄訳