現在案件で使用しているPinia（ピーニャ）がすごい！と個人的に話題なので
どんなものか簡単に紹介してみようと思います〜！

Pinia（ピーニャ）とは

📌公式ドキュメント
📌GitHub

PiniaはVuexの次世代版とも言える、Vue.js向けの状態管理ライブラリです🍍
（スペイン語でパイナップルという意味らしいです）

複数のコンポーネント間で共有したいデータを、一元的に管理することができます。

なんでも、Composition APIを使用してStoreがどのように表示されるかを
Vuexの代わりとして実験してみたところから生まれたそう！（公式ドキュメントより）

2021年末には、Vue.js公式ではVuexからPiniaが推奨されるようになりました🍍
（時期的にもVue2/Vuex → Vue3/Piniaという組み合わせに移り変わった印象）

Vuexと同様にコンポーネント間で状態の受け渡しが簡単になるだけでなく、
mutationsが廃止されているため、Vuexより単純明快に書けるのが特徴です＾＾

将来的にはVuex5に統合される、なんて話もあるようです

Piniaのいいところ

個人的な印象では、良さを感じることが大半だと思います！
私はVuexを本格的に使用する前にPiniaを知ってしまったので
比較が難しかったのですが、公式ドキュメントを参考にいくつか挙げてみました！

記述量が少ない

見た目の整ったStoreを作成できるようになったため、かなり見やすくなりました！
stateの書き換えが容易であったり、gettersが簡潔であったり、、、恩恵はたくさんあります＾＾

型安全

これがPinia最大のメリットと言っても過言ではありません！

TypeScriptがフルサポートされているため
型推論によって、常に型安全な状態が保証されます、、、なんと素晴らしい、、！

とっても軽い

Piniaの重さは約1kbで、そこにあることさえ忘れてしまいます（可愛いので公式直訳）
動作サックサクはいいことしかないですね＾＾

Vue2/Vue3に対応

少し前までは、Vue2で使用する場合にはCompositionAPIプラグインの追加が必須となっていましたが
現在は追加しなくとも問題なく使えるようです。

Piniaの気になるところ

基本的にPiniaはVuexの改良版になっていると思うのですが、
Vuexと比べると大幅に変わったところもあるので
人によってはデメリットと捉えられるのかな？と思う点を挙げてみました！

Store外でも書き換え可能

Storeの外から直接値を書き換えることができる点では、
開発が大規模であればあるほど、不安要素になりかねませんね。。。

Mutations廃止

mutationsがなくなった代わりに、
stateの値を変更する場合には、actionsを使用する書き方へと変わりました。

しかし、mutationsが廃止されたことに関しては、賛否両論あるみたいです。。。
個人的には形骸化していたものがなくなった、と捉えられるなと思いました！

みなさんはどう思いますか？？

Piniaを使ってみよう

早速プロジェクトを作成、ファイルに移動しPiniaをインストールしていきます！

npmを使用する場合

$ npm install pinia

yarnを使用する場合

$ yarn add pinia

インストール後package.jsonを覗くとバージョン確認できるので、覗いてみてください〜！

次にPiniaを読み込む下準備をします！
TypeScriptを用いる場合、main.tsに下記のように書き込んでいきます＾＾

main.ts

import { createPinia } from 'pinia'

// 変数piniaに代入
const pinia = createPinia()
app.use(pinia)

このようにしてPiniaインスタンスを変数に代入することで、より簡単にアクセスできるようになります。

Piniaの基本的な書き方はざっくりとこんな感じです

src/stores/hoge.ts

import { defineStore } from 'pinia'

// 'hoge'はstoreの名前
export const useStore = defineStore('hoge', {
  
  state: () => {
    return {
      // プロパティ名: 初期値
      counter: 0,
      name: 'Eduardo',
    }
  },

  getters: {
    // stateを受け取ることができる
    doubleCount: (state) => state.counter * 2,

    // gettersは他のgettersへのアクセスも可能
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    },
  },

  actions: {
    // stateで定義したデータの更新
    reset() {
      this.counter = 0
    },
  },
})

このような流れでPiniaは導入することができます！
詳しくはPiniaの📌GitHubに載っているのでいるので是非見てみてください＾＾

データの流れ

上述したPiniaのデータの流れを言葉で表すとこんな感じです。

state
初期値を返す関数を定義
（actionsが取ってきた値で中身を更新）

↓

getters
stateのデータに対する算出プロパティを定義
（引数に応じて結果を差し替える場合には、フロント上で関数をreturnする必要がある）

↓

actions
mutationsが廃止されているため、stateで定義したデータの更新は全てactionsで行う

hoge.ts

actions: {
    // カウンターを0にリセット
    reset() {
      this.counter = 0
    },
  },

参考文献

📌GitHub
📌グローバルステート管理ライブラリである「Pinia」について

おわりに

開発の規模の大小に関わらず、TypeScriptとの相性の良さや記述量の削減という観点から
Piniaを導入するメリットは多いように感じます、、、！

名前も可愛いですし、今後も可愛がっていきたいライブラリです＾＾