SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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では、アクションの実装時に、開発環境がメソッド名を一覧してくれる入力支援機能が利用できます。

次のページ
Piniaのステート、ゲッター、アクションを使いこなす

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18727 2023/12/11 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング