現在案件で使用しているPinia（ピーニャ）がすごい！と個人的に話題なので
どんなものか簡単に紹介してみようと思います〜！
Pinia（ピーニャ）とは
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に下記のように書き込んでいきます＾＾
import { createPinia } from 'pinia'
// 変数piniaに代入
const pinia = createPinia()
app.use(pinia)
このようにしてPiniaインスタンスを変数に代入することで、より簡単にアクセスできるようになります。
Piniaの基本的な書き方はざっくりとこんな感じです
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で行う
actions: {
// カウンターを0にリセット
reset() {
this.counter = 0
},
},
参考文献
📌GitHub
📌グローバルステート管理ライブラリである「Pinia」について
おわりに
開発の規模の大小に関わらず、TypeScriptとの相性の良さや記述量の削減という観点から
Piniaを導入するメリットは多いように感じます、、、！
名前も可愛いですし、今後も可愛がっていきたいライブラリです＾＾