こんにちは

急に寒くなったり、暖かくなったり、本当によくわからない日が続いていますね。

私はフルリモート勤務のため、外に出ることはほとんどないため、

暖かろうが、寒かろうが関係ないのですが。。。

 

さて、今回はいつもの記事紹介ではなく、

現在参画しているプロジェクトでvue３化を行う必要が出てきたために、

vue3化することで何か変わるのか、piniaとは何かなどを調べたので、

備忘録として記したいと思います。

 

まず、piniaについて。

piniaとはVue.jsの状態管理ライブラリであり、vue2ではVuexが使用されていたライブラリの代わりとなるものです。

コンポーネント間でデータを共有などを行うため、stateにデータを格納、getterでデータを取得、mutationでデータの更新、actionで更新以外のその他の挙動を実装など、状態管理ライブラリを使用することで、共通で使用できるものを定義していました。

 

このような状態管理ライブラリですが、vue3ではpiniaが推奨されるようになりました。

piniaとVuexの違いは以下のとおりです。

• Vuexと異なり、Piniaはデフォルトの状態で型推論が可能となる。
• mutationsの廃止

他にも記述方法など異なる点はありますが、大きな点がこの2点ではないかと思います。

型推論に関しては、typescriptユーザーとしては、せっかく型チェックが行われるtypescriptを使用しているにも関わらず、Vuexを通すと型チェックの意味がなくなってしまう点が大きな課題でした。

その点をpiniaはデフォルトでサポートしているため、vue3化のタイミングでpiniaが推されるようになったのではないでしょうか。

 

次に、mutationsの廃止です。

これは、私個人としては別にstateを更新する用のものという認識があるので、あってもいい気がするのですが、mutationsはactionsに書いて、mutationsは不要だという考えを持つ方が多いようなので、piniaではmutationsを廃止したようです。

まぁ、メソッド名などできちんとわかりやすくしていればどちらでも良いかもしれないです。

 

その他にもpinia専用のメソッドなども用意されているようで、少し調べただけでも、

piniaはなんとなく使いやすそうな印象を受けました。

vue3化は破壊的な変更が多いため、周辺ライブラリはあまり変更したくないという方もいるかも知れないですが、移行後の開発のしやすさなども考慮してライブラリの変更の検討などもすると良いかもしれません。

 

参考

https://qiita.com/Naoto_Ito/items/ede2b0a09f474df5e704

Pinia 完全攻略ガイド：Vuexと違いや状態管理方法を徹底解説【Vue.js 公式パートナーが解説】