OVERFLOW: AUTO;

Aiming to be modern, practical skilled front-end engineer.

Nuxt + TypeScript + GraphCMS でブログサイトを作る_02

f:id:show-hei:20200709020617p:plain

早速ですが、脱線して Todo アプリ作ります。

overflow-auto.hatenablog.com

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 へ記述する。

f:id:show-hei:20200709015207p:plain

トランスパイルの設定

こちらも同じく nuxt.config.js もしくは nuxt.config.ts に記述する。

f:id:show-hei:20200709020059p:plain

導入は以上です。

Store を使うための設定

この記事にかなり助けられました。読んでいただけると理解が深まると思います。

qiita.com

Nuxt.js のページやコンポーネントにおいて store 内の値を取得する場合、Vuex の mapState や this.$store.state などを使ってきました。実装コードは実際の使用時に記述しますが、nuxt-typed-vuex を使う場合、これらの代わりに this.$accessor という記述を使って呼び出します。

その accessor を使用できる状態にするため、index.d.tsstore/index.ts を作成して必要な記述をしていきます。

追加するもの - index.d.ts

こちらはルートディレクトリに作成します。

index.d.tsd は定義ファイルという意味で、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 を追加していきます。