今更ながらの Pinia - インゲージ開発者ブログ

皆さんこんにちは！フルスタックエンジニアというよりどっちつかずの hikaru-kimi です！！

早速ですが、Vue.js の store 管理はみなさんどうされていますか？

Vue.js の store 管理といえば、今や事実上開発が終了して久しい Vuex ではなく Pinia であるというのは広く人の知るところであると思います！

今回は、Vuex と Pinia の差異や、Pinia の簡単な概要について今更ながらご紹介していきたいと思います！！

Pinia って何？

Vue.js 2系までは事実上の標準だった Vuex に代わる状態管理ライブラリです。Vue.js 3系からは事実上の標準ライブラリとして扱われています。Vue.js 5系から公式ライブラリ化するとの噂がまことしやかに囁かれています。読み方は「ピーニャ」です。ただ一部文献やサイトでは「ピニア」と読むと書かれているものもあります。

公式サイト: https://pinia.vuejs.org/

Pinia の簡単な特徴

特徴を一部抜粋します。以下の通りとなります。

state を変更する際、Vuex における mutations を廃止し、actions に一本化された
TypeScript を完全サポートし、Vue3の composition API と相性がいい
便利な関数が多数搭載されている

mutation の廃止

Vuex では、store の内容を更新する際 actions で mutations を呼び出し、その mutations が実際に store の内容を更新する、という手順を踏んでいました。一方の Pinia では、 actions が直接 store の内容を更新するようになりましたので、Vuex のような手間が一つ減った形となります。

Vuex ではいわゆる Redux 思想に則って設計されていたためこのような作りでしたが、Pinia では Vue.js での利用容易性を考慮した作りに再設計されたようです。

TypeScript の完全サポート

Pinia では TypeScript を完全サポートする形となりました。これによって、例えば store 定義の際に composition API ライクな書き方も可能となりました。

便利な関数

Pinia では store 操作のための便利な関数が多数搭載されています。以下、一部ご紹介したいと思います。

$reset: store を初期化する

$patch: store 内に定義された actions を介さずに store を更新する

$subscribe: store の変更を検知して、任意の処理を実行する

Vue.js 3系の composition API にも対応

Vue.js 3系で導入された composition API に合わせた作りとなっているため、store の定義一つ取ってみても composition API のような書き方が可能となりました。

以下簡単にサンプルコードです。

import { defineStore } from ‘pinia’;
import { ref, computed } from ‘vue’

export const useCountStore = defineStore(‘count’, () => {
  // setupの感じでstoreを書く
  // 値
  const count = ref<number>(1);

  // メソッド
  const increment = () => {
    count.value++;
  }

  const doubleCount = computed(() => count.value * 2;

  return { count, increment, doubleCount }
});