nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
  • 2022.01.12に公開
  • ブログ構築TS
  • 6. Vuex×TypeScriptセットアップ
  • No.2 / 4

今回達成すること

nuxt-typed-vuexのインストールとセットアップを行います。

そしてVuexストアの値をVueファイルから呼び出し、挙動や使い方を学びます。

最初にブランチを切っておきましょう。

% git checkout -b 20220109_setup_nuxt_typed_vuex
% git branch

* 20220109_setup_nuxt_typed_vuex

nuxt-typed-vuexをインストールする

nuxt-typed-vuexをインストールします。

% yarn add nuxt-typed-vuex

Vuexをラップしたモジュールなのでdependenciesにインストールします。

今回はv0.2.0を使用します。

% yarn list --pattern nuxt-typed-vuex

└─ nuxt-typed-vuex@0.2.0

nuxt.config.jsbuildModulesに登録します。

nuxt.config.js
export default {
  buildModules: [
    // https://typed-vuex.roe.dev
    'nuxt-typed-vuex'
  ],
}

Vuexファイルを作成する

Vuexを扱うファイルを作成します。

storeディレクトリ直下にindex.tsを作成します。

% touch store/index.ts

nuxt-typed-vuexを使ったVuexの基本構文

作成したindex.tsにVuexの基本構文4つを追加します。

store/index.ts
// typed-vuex setup: https://typed-vuex.roe.dev/getting-started/getting-started-nuxt
import { getAccessorType, getterTree, mutationTree, actionTree } from 'typed-vuex'

export const state = () => ({
  /* state */
})

export const getters = getterTree(state, {
  /* getter */
})

export const mutations = mutationTree(state, {
  /* mutation */
})

export const actions = actionTree({ state, getters, mutations }, {
  /* action */
})

getterTreemutationTreeactionTreenuxt-typed-vuexの構文となります。

この中に関数を記述することで、自動でVuexストアの型定義を返してくれます。

Vuexストアの型をエクスポートする

型定義をgetAccessorTypeでコンパイルし、型宣言ファイルへエクスポートします。

store/index.ts
export const actions = actionTree({ state, getters, mutations }, {
  /* action */
})

// 一番下に追加
export const accessorType = getAccessorType({
  state,
  getters,
  mutations,
  actions,
  modules: {
    /* sub modules */
  }
})

modules: {}とは

modules: {}には、index.ts以外の型定義が入ります。

例えばstore/post.tsを作成した場合、modules: {} 内は以下のように書きます。

store/index.ts(例)
import * as post from '~/store/post'

export const accessorType = getAccessorType({
  modules: {
    post
  }
})

module.d.tsファイルを作成する

型宣言ファイルを作成します。

モジュールの型宣言ファイルとして、プロジェクトディレクトリ直下にtypes/module.d.tsを作成します。

module.d.tsは、nuxt-typed-vuex以外にも、アプリ全体で使用するグローバルなモジュールの型定義ファイルとします。

これは独自ルールなので、ディレクトリパスやファイル名は管理しやすいように変更してOKです。

% mkdir types && touch $_/module.d.ts

interface Vueと、interface NuxtAppOptionsにVuexストアの型を追加します。

types/module.d.ts

import { accessorType } from '~/store'

/*
  nuxt-typed-vuexの型定義をVueとNuxtに登録
  Doc: https://typed-vuex.roe.dev/getting-started/getting-started-nuxt#creating-type-definitions
*/
declare module 'vue/types/vue' {
  interface Vue {
    $accessor: typeof accessorType
  }
}

declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $accessor: typeof accessorType
  }
}

これでnuxt-typed-vuexが使用できるようになりました。

Vuexストアは$storeではなく$accessorを使用する

nuxt-typed-vuex を使用したVuexは、$accessor で呼び出します。

$storeで呼び出しするとTypeエラーになるので注意してください。

コンテキスト $accessorの格納場所

Nuxtコンテキストには、appプロパティ以下に$accessorが格納されています。

Vueファイル
@Component
export default class IndexPage extends Vue {
  asyncData ({ app: { $accessor } }) {
    const hoge = $accessor.hoge
  }
}

nuxt-typed-vuexの型定義

それではnuxt-typed-vuexがどのような挙動をするか学びましょう。

stateの型付け

state内のデータの型付けにはasを使用します。

state全体の型を使用する場合は、ReturnType<typeof state>で型定義を行います。

store/index.ts
export const state = () => ({
  count: 0 as number
})

type RootState = ReturnType<typeof state>

gettersの型付け

gettersは、returnの値によって自動で型定義を行います。

下記コードは number |'カウントゼロ' の型が定義されます。

store/index.ts
export const getters = getterTree(state, {
  countValue: (state: RootState, _getters) => (
    state.count || 'カウントゼロ'
  )
})

mutationsの型付け

mutationsの戻り値はvoid型が定義されます。

引数に渡すpayloadは自分で型を定義します。

store/index.ts
export const mutations = mutationTree(state, {
  setCount (state: RootState, payload: number) {
    state.count += payload
  }
})
エディタで解析された型定義

2022-01-10 15-47-03

actionsの型付け

actionsの戻り値はvoid型が定義されます。

この型は自ら定義することも可能です。

メソッドの引数(value: number)には自ら型を定義を行います。

store/index.ts
export const actions = actionTree({ state, getters, mutations }, {
  countUp ({ commit }, value: number) {
    commit('setCount', value)
  }
})

{ commit }などのコンテキストの型は、nuxt-typed-vuexActionContextとして自動で型定義してくれます。

下画像を見て分かる通り、ActionContextには stategettersmutations の型が定義されています。

これはactionTree()に渡したstategettersmutations を解析し型定義を行なっています。

エディタで解析された型定義

2022-01-10 15-51-02

例えばgetters.countValueをArray型に代入しようとするとエラーとなります。

これはアクションメソッドのコンテキストの型が正しく定義されている証拠です。

export const actions = actionTree({ state, getters, mutations }, {
  countUp ({ commit, getters }, value: number) {
    /* 
      Type Error
      Type 'number | "カウントゼロ"' is not assignable to type '[]'.
      Type 'number' is not assignable to type '[]'.
    */
    const count: [] = getters.countValue
  }
})

VueファイルからのVuexを呼び出そう

Vuexストアで宣言した値と関数をpages/index.vueから呼び出します。

pages/index.vue
<template>
  <div>
    <v-container>
      <!-- v-container直下に追加 -->
      <v-card>
        <v-card-title>
          nuxt-typed-vuexのテスト
        </v-card-title>
        <v-card-text>
          state.count: {{ $accessor.count }}<br>
          getters:countValue: {{ $accessor.countValue }}
        </v-card-text>
        <v-card-actions>
          <v-btn
            @click="$accessor.countUp(1)"
          >
            count up
          </v-btn>
        </v-card-actions>
      </v-card>
      <!-- ここまで -->
</template>

ブラウザにVuexストアの値が表示されました。

COUNT UPボタンでStateの値が増えていることも確認してください。

2022-01-10 16-29-39

stateやactionメソッドは$accessor直下に紐づく

従来のVuexと大きく変わる点は、stategettersmutationsacrionsで宣言したデータや関数は、全て$accessor 直下のプロパティに追加されます。

console.log(this.$accessor)
$accessor: {
  count: (...)
  countValue: (...)
  setCount: ƒ (mutationPayload)
  countUp: ƒ (actionPayload)
}

サブモジュールは$accessor.<プロパティ名>で呼び出す

store/index.ts以外のファイルはサブモジュールとして登録します。

store/index.ts(例)
import * as post from '~/store/post'

export const accessorType = getAccessorType({
  modules: {
    // 呼び出しプロパティ名
    post
  }
})

この時store/post.tsの値を呼び出す場合は、modulesで指定したプロパティ名で呼び出します。

pages/inde.vue(例)
<div>
  {{ $accessor.post.<State or function> }}
</div>

それではコミットして作業を終わります。

% git add -A
% git commit -m "Add module nuxt-typed-vuex and initial settings"

次回は?

今回はnuxt-typed-vuexのインストールとセットアップ、挙動とVuexの扱い方を学びました。

次回は、VuexにContentfulのAPIデータの型定義やStateの用意を行います。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる。そんな方に向けた単発・短期間メンターサービスを行っています。
独学プログラマのサービス
ブログ構築TSの投稿
1
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #01
Nuxt.jsをローカルPCに立ち上げよう
2
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #02
Nuxt.jsプロジェクトをGitHubにPushしよう
3
  • Nuxt.js×TypeScript開発環境構築
  • /
  • #03
nuxt-property-decoratorのインストールとTypeScriptのセットアップ
1
  • Vuetifyセットアップ
  • /
  • #01
TypeScript環境のNuxt.jsにVuetifyを導入しよう
2
  • Vuetifyセットアップ
  • /
  • #02
VuetifyにカスタムCSSを追加してSASS変数を理解しよう
3
  • Vuetifyセットアップ
  • /
  • #03
VuetifyにカスタムSVGアイコンを追加しよう
1
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #01
Netlify CLIをインストールして本番環境のサイトを作成しよう
2
  • NetlifyCLIを使ったNuxtデプロイ
  • /
  • #02
netlify.tomlを使ってNuxt.jsをNetlifyに手動デプロイしよう
1
  • Contentfulモデル構築
  • /
  • #01
Contentfulの料金とCommunityプランの無料枠を理解する
2
  • Contentfulモデル構築
  • /
  • #02
Contentfulへ新規会員登録、ロケールの変更、API Keyの発行を行う
3
  • Contentfulモデル構築
  • /
  • #03
Contentful ブログカテゴリーモデルを作成しよう
4
  • Contentfulモデル構築
  • /
  • #04
Contentful カテゴリーモデルに1対1で関連づくblogPostモデルを作成しよう
5
  • Contentfulモデル構築
  • /
  • #05
Contentful ブログ記事に1対多で関連づくplogTagモデルを作成しよう
6
  • Contentfulモデル構築
  • /
  • #06
Contentful カテゴリー・ブログ記事・タグコンテンツを作成しよう
1
  • Nuxt.js×Contentfulセットアップ
  • /
  • #01
Nuxt.js×Contentfulセットアップ。モジュールのインストールからAPI Keyの登録まで
2
  • Nuxt.js×Contentfulセットアップ
  • /
  • #02
Contentful APIリクエストの実行 Nuxt.jsにブログコンテンツを表示しよう
3
  • Nuxt.js×Contentfulセットアップ
  • /
  • #03
ContentfulAPIをNetlifyにデプロイしよう【Nuxt FullStaticのasyncDataとfetch】
1
  • Vuex×TypeScriptセットアップ
  • /
  • #01
Vuexの型付け vuex-module-decoratorsとnuxt-typed-vuexどちらを使用するか
2
  • Vuex×TypeScriptセットアップ
  • /
  • #02
nuxt-typed-vuexのインストールとセットアップ。Vuexの型定義と呼び出し方
3
  • Vuex×TypeScriptセットアップ
  • /
  • #03
VuexにContentfulの型定義ファイルとnuxtServerInitを追加しよう
4
  • Vuex×TypeScriptセットアップ
  • /
  • #04
VuexにContentfulAPIレスポンスを保存してVueファイルに表示しよう
1
  • コンテンツページ構築
  • /
  • #01
ブログアプリのページ設計とNuxt.jsの動的ルーティングについて理解しよう
2
  • コンテンツページ構築
  • /
  • #02
カテゴリーのコンテンツページを作成しよう【Nuxt.js×Contentful】
3
  • コンテンツページ構築
  • /
  • #03
カテゴリーに関連付くブログ記事一覧を表示しよう【Nuxt.js×Contentful】
4
  • コンテンツページ構築
  • /
  • #04
injectを使用して共通エラー処理メソッドを作成しよう【Nuxt×TypeScript】
5
  • コンテンツページ構築
  • /
  • #05
NuxtChildを使用してブログ記事ページを作成しよう【Nuxt.js×TypeScript】
6
  • コンテンツページ構築
  • /
  • #06
タグ一覧ページとタグ関連づく記事一覧を表示しよう【Nuxt.js×TypeScript】
7
  • コンテンツページ構築
  • /
  • #07
プライバシーポリシーページを作成しよう【Nuxt.js×TypeScript】
8
  • コンテンツページ構築
  • /
  • #08
@nuxtjs/i18nのインストールとセットアップ。ページタイトルの翻訳化【TypeScript】
1
  • NetlifyFunctionsを使った検索機能
  • /
  • #01
Netlify Functionsを使ってクエリを返す関数を作成しよう【Nuxt.js×TypeScript】
2
  • NetlifyFunctionsを使った検索機能
  • /
  • #02
Netlify Functionsプロジェクトをデプロイしよう【Nuxt.js×TypeScript】
3
  • NetlifyFunctionsを使った検索機能
  • /
  • #03
Nuxt.js × axiosセットアップ Netlify Functionsにリクエストを行う準備をしよう
4
  • NetlifyFunctionsを使った検索機能
  • /
  • #04
オリジン•CORS•プリフライトリクエストを理解する【Nuxt.js×Netlify Functions】
5
  • NetlifyFunctionsを使った検索機能
  • /
  • #05
Netlify Functionsを使ってフォームバリデーション機能を構築しよう【Nuxt.js】
6
  • NetlifyFunctionsを使った検索機能
  • /
  • #06
ツールバーに表示する検索フォームを作成しよう【Nuxt.js×TypeScript】
7
  • NetlifyFunctionsを使った検索機能
  • /
  • #07
検索ページを作成しよう【Vue propsとTypeScriptの書き方 解説】
8
  • NetlifyFunctionsを使った検索機能
  • /
  • #08
Netlify FunctionsからContentfulAPIリクエストを送ろう【Nuxt.js】
9
  • NetlifyFunctionsを使った検索機能
  • /
  • #09
検索ページに「もっと見る」ボタンを実装しよう【Nuxt.js×TypeScript】
1
  • ブログMarkdown対応
  • /
  • #01
@nuxtjs/markdownitのインストールとセットアップ【Nuxt.js×TypeScript】
2
  • ブログMarkdown対応
  • /
  • #02
Nuxt.js×markdown-it 外部リンクを別タブで開くプラグインを追加しよう
3
  • ブログMarkdown対応
  • /
  • #03
Nuxt.js×markdown-it 内部リンクをVueRouterで高速にページ遷移しよう
4
  • ブログMarkdown対応
  • /
  • #04
Nuxt.js×markdown-it アンカーリンクとブログ目次を自動生成しよう
独学プログラマ
独学でも、ここまでできるってよ。
CONTACT
Nuxt.js制作のご依頼は下記メールアドレスまでお送りください。