VueFesでpiniaについて得た学び（分割代入・ライブラリー）

はじめに

昨日はVueFes 2024に参加してきました！
面白いテーマも多く、面白いスポンサーブースも多かったです。トークセッションの中では、「Piniaの現状と今後」というものがありました。

そのセッションで、今までpiniaについて知らなかったところが何点かあったためまとめてみました。

1. stateとactionをまとめて分割代入

piniaのsetup storeで開発をしていると、以下のような場面に出会うことがあります。
state要素（storeで定義したref, computedなど）はstoreToRefsを使って分割代入ができますが、actions要素（メソッド）はstoreのインスタンスから直接分割代入を行う必要がありました。

そのため、毎回vueファイルには分割代入のために二つの記述が必要でした。

<script lang="ts" setup>
import { useHomeStore } from '@store/homeStore.ts';
import { storeToRefs } from 'pinia';

const homeStore = useHomeStore();

// state分割代入
const { clickedPhoto, clickedImage, isOpened, photoIndex } = storeToRefs(homeStore);

// actions分割代入
const { getPhoto, setPhoto } = homestore;
</script>

少し不便だと思いつつ、特に対応策は見つかっていなかったところ、今回のセッションで以下の記事を元にした対応策について知ることができました。

要するに以下のような記述をすることで分割代入をまとめることができます。

export const useProcessedHomeStore = () => {
  const store = useHomeStore()
  return { ...store, ...storeToRefs(store) }
}

こうすることで毎回vueファイルにstoreToRefsのimportを記述しなくても良くなりました。

<script lang="ts" setup>
import { useProcessedHomeStore } from '@store/processedHomeStore.ts';

const homeStore = useProcessedHomeStore();

// まとめて分割代入
const { clickedPhoto, clickedImage, isOpened, photoIndex, getPhoto, setPhoto } = homestore;
</script>

2. 更なるライブラリーの発見

Pinia Plugin Persistedstate

piniaを使ってlocalstorageの管理を簡単に行うことができるライブラリーです。
piniaとlocalstorageの管理が別々になって管理が難しいと思っていたため、ぜひ使ってみたいです。

Pinia Colada

似たような名前のカクテルがあるらしいです。

このライブラリーを使うことで、tanstack queryのようにキャッシュの管理ができるらしいです。
現在やっているプロジェクトでpiniaとtanstack queryを両方使っていますが、状態管理がバラバラになっているとlocalstorageと同じく何が何を持っているかよくわからなくなることがあります。

このように、piniaを使って状態管理を一元化できるライブラリーも揃っていることがわかりました。

おわりに

今回はスポンサーブースが楽しくてあまり多くのセッションは聞けていないのですが、その中でもいろいろな学びを得ることができました。
来年もまたVueFesいきたいな！