piniaのデータを永続化したい

はじめに

こんばんは。

最近関わっているプロジェクトでフロントエンドの状態管理に pinia を使っています。

このpiniaで管理しているデータをLocalStorageなりに入れて永続化してみました。

本題

以前状態管理に vuexを使っていて同じく 永続化したい要望があって、以下のライブラリを使ってました。 (もうメンテされないのですね...)

github.com

piniaでも似たようなものないかなと探していたら見つけました。

何個かあるみたいですね。

github.com

github.com

設定は大体同じで 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'],
//  },
})

終わりに

かんたんな備忘録でした。

フロントエンドは初めてやることばっかりで面白いです。

現場からは以上です。