Nuxt Composition API ドキュメント抄訳

## ドキュメント

https://composition-api.nuxtjs.org/


## useContext

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

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

```ts
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を返します。

```ts
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回限りの用途にのみ適しており、その限りでユニークなキーを提供します。 [詳しい情報](/getting-started/gotchas#keyed-functions).**


## useFetch

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

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

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

```ts
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` を使って処理コストの高い関数をあらかじめ走らせることができます。

```ts
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の説明](/getting-started/setup) を参照。）**

### SSR

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

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

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

## onGlobalSetup

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

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

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

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

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


## リポジトリ

https://github.com/silloi/composition-api/tree/docs-ja