はじめに
こんばんは。
最近関わっているプロジェクトでフロントエンドの状態管理に pinia を使っています。
このpiniaで管理しているデータをLocalStorageなりに入れて永続化してみました。
本題
以前状態管理に vuexを使っていて同じく 永続化したい要望があって、以下のライブラリを使ってました。 (もうメンテされないのですね...)
piniaでも似たようなものないかなと探していたら見つけました。
何個かあるみたいですね。
設定は大体同じで piniaのスクリプトファイルに persist: true
などを追加するだけです。
違う記述方法でsessionStorageに保存することも可能です。
import { defineStore } from 'pinia' import { TUser } from '../types/user' export const useUserStore = defineStore('userStore', { state: () => ({ user: {} as TUser }), getters: { getUser: (state) => state.user }, actions: { setUser(user: TUser) { this.$state.user.user } }, persist: true // ← これが重要 // SessionStorageに保存する場合はこんな感じ // persist: { // storage: sessionStorage, // paths: ['someState'], // }, })
終わりに
かんたんな備忘録でした。
フロントエンドは初めてやることばっかりで面白いです。
現場からは以上です。