Nuxt + TypeScript + GraphCMS でブログサイトを作る_02
早速ですが、脱線して Todo アプリ作ります。
Nuxt + TypeScript
ってどう書けるんだっけという理解から進めるため、一旦ブログを作る手を止めます。そして基本の ToDo アプリからやってみようと思い立ったところ。
nuxt-typed-vuex の導入
この辺は公式に則ってやれば OK。以下の説明はそのまんま。
Getting started (Nuxt) | 🏦 Nuxt Typed Vuex
プラグインインストール
$ yarn add nuxt-typed-vuex
モジュールの追加
nuxt.config.js
もしくは nuxt.config.ts
にモジュールとして記述。
Nuxt.js のバージョンによって、記述する箇所が違うのでそこだけ注意。Nuxt.js 2.10 よりも古い場合は modules
に記述、Nuxt.js 2.10 以上の場合は buildModules
に記述。
バージョンは package.json で確認できる。私は 2.12.0 なので buildModules へ記述する。
トランスパイルの設定
こちらも同じく nuxt.config.js
もしくは nuxt.config.ts
に記述する。
導入は以上です。
Store を使うための設定
この記事にかなり助けられました。読んでいただけると理解が深まると思います。
Nuxt.js のページやコンポーネントにおいて store 内の値を取得する場合、Vuex の mapState や this.$store.state などを使ってきました。実装コードは実際の使用時に記述しますが、nuxt-typed-vuex
を使う場合、これらの代わりに this.$accessor
という記述を使って呼び出します。
その accessor を使用できる状態にするため、index.d.ts
と store/index.ts
を作成して必要な記述をしていきます。
追加するもの - index.d.ts
こちらはルートディレクトリに作成します。
index.d.ts
の d
は定義ファイルという意味で、TypeScript の型の定義に関する情報が記述されるファイルのことです。
記述する内容は公式のままです。
import { accessorType } from '~/store' declare module 'vue/types/vue' { interface Vue { $accessor: typeof accessorType } } declare module '@nuxt/types' { interface NuxtAppOptions { $accessor: typeof accessorType } }
追加するもの - store/index.ts
store/index.ts
は store のインデックスファイルとして作成します。
今回 ToDo アプリを作成するうえで、store/todo.ts
というファイルを後で追加しますが、そのファイルの state などの情報は一旦このインデックスファイルで吸い上げるような形をとります。その実装はあとでやるので、一旦以下の内容で記述してしまいます。
// store/index.ts import { getAccessorType } from 'typed-vuex' export const state = () => ({}) export const getters = {} export const mutations = {} export const actions = {} export const accessorType = getAccessorType({ state, getters, mutations, actions })
ここまで。
次回は Todo の Store を追加していきます。