Nuxt compotion API (WIP)
従来の単一コンポーネントは、テンプレートの肥大化してしまうことを避けるため、
ロジックを外に出す目的でvuexが使われることもありました。
compositionAPIを利用するとVuexに頼らずにロジック部分をきれいに別ファイルにわけるようにかけるようになる。
そのファイルをみればわかるというメリットがなくなるため、わかりやすい命名・インターフェイス設計が要求される
Options API のデメリット
data(ローカルステート)で定義されたコンポーネントの状態が参照する必要がなくてもテンプレートに公開されてしまう
データと処理が離れて記載されているため、読みにくい
ロジックの分離が難しいため、外部ライブラリーの依存をコンポーネント内に記載する必要があった
useAsync
client sideでは、走らない。
code: ~/compositions/post.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 }
},
})
useFetch
useFetch は、onGlobalSetupでは利用できない
code:typescript
import { defineComponent, ref, useFetch } from '@nuxtjs/composition-api'
import axios from 'axios'
export default defineComponent({
setup() {
const name = ref('')
const { fetch, fetchState } = useFetch(async () => {
})
// Manually trigger a refetch
fetch()
// Access fetch error, pending and timestamp
fetchState
return { name }
},
})
useContext
Nuxt のコンテキストに簡単にアクセスできる
code:typescript
import { defineComponent, useContext } from '@nuxtjs/composition-api'
export default defineComponent({
setup() {
const { store } = useContext()
store.dispatch('myAction')
},
})
wrapProperty
リアクティブなヘルパーにコンバートできる
code:typescript
import { defineComponent, useContext } from '@nuxtjs/composition-api'
export default defineComponent({
setup() {
const { store } = useContext()
store.dispatch('myAction')
},
})