TypeScriptとも相性抜群なライブラリ──Vue.jsで状態管理を行う新定番「Pinia」を解説！

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第8回

VuexとPiniaとの比較

　Vue.jsの状態管理ライブラリーとして、これまではVuexが多く利用されてきました。ここではVuexで図3と同じ動作をするサンプル（p003-vuex）を例に挙げて、実装内容をPiniaと比較します。Vuexストアの実装はリスト6の通りです。リスト3のOption Storesと似た記述になりますが、ステートを更新する処理がミューテーションとアクションに分かれる点が異なります。アクションでは（1）でcontext.commitメソッドにミューテーション名を指定して、ミューテーションを実行します。

［リスト6］Vuexストアの実装（p003-vuex/src/stores/counter.ts）

export const store = createStore({
  // ステート
  state () {
    return {
      count: 0
    }
  },
  // ゲッター
  getters: {
    doubleCount: (state) => state.count * 2
  },
  // ミューテーション
  mutations: {
    increment (state) {
      state.count++
    }
  },
  // アクション
  actions: {
    increment (context) {
      context.commit('increment') // ...（1）
    }
  }
})

　main.ts、ShowStore・MutateStateコンポーネントも、Vuexに合わせてそれぞれ実装が変わります。ここではポイントになる違いを抽出して説明します。まず、ShowStoreコンポーネントでストアのステートやゲッターを参照する際、「store.***」と直接指定するのではなく、「store.state.***」や「store.getters.***」といった記述になります。

［リスト7］Vuexでストアのステートやゲッターを参照する記述（p003-vuex/src/components/ShowStore.vue）

<div>State（count）：{{ store.state.count }}</div>
<div>Getter（doubleCount）：{{ store.getters.doubleCount }}</div>

　また、MutateStateコンポーネントでincrementアクションを実行する実装は、incrementメソッドを直接実行するのではなく、store.dispatchメソッドにアクション名（'increment'）を文字列で指定します。

［リスト8］Vuexでアクションを実行する記述（p003-vuex/src/components/MutateState.vue）

store.dispatch('increment')

　以上を踏まえて、Vuexと比較したときのPiniaのメリットを以下に示します。

Piniaのメリット1：ミューテーションが存在しない

　Vuexにはミューテーションとアクションという概念がありました。「ミューテーションはステートの更新のみを行い、アクションはミューテーションを呼び出す」「非同期処理はアクションにのみ含める」という役割分担がありますが、実装時に煩雑なのも事実です。Piniaではミューテーションがなくなり、アクションだけになりました（後述の通り、Piniaのアクションも非同期処理を含めることができます）。

Piniaのメリット2：TypeScriptにネイティブ対応

　Vuexにおいて、ストアの変数（リスト7、8の「store」）にはデフォルトで型定義がなく、any型になるので、Vuexで型定義を利用するには別途実装が必要です。一方Piniaでは、ストアの変数（リスト4、5の「store」）はデフォルトで型定義され、TypeScriptのメリットをより自然に享受できます。

Piniaのメリット3：開発環境の入力支援と相性が良い

　Vuexでミューテーションやアクションを呼び出す際には、リスト6（1）やリスト8の通り、メソッドの引数に名前（文字列）を設定する必要があります。一方Piniaでアクションを呼び出す際には、リスト5（3）の通り、単にメソッドを実行します。この違いによりPiniaでは、アクションの実装時に、開発環境がメソッド名を一覧してくれる入力支援機能が利用できます。