【Vue3 + Typescript】pinia のデータを永続化する方法

Vue3 & Typescript 環境で Pinia のデータを永続化する方法メモ

環境情報

Docker
Vite 3.2.38
Vue 3.0.9
TypeScript 3.0.9
Pinia 3.0.9

pinia のデータを永続化する

今回 prazdevs/pinia-plugin-persistedstate を使用します。

インストール

こちらに記載してる方法でインストールを進めていきます。
Getting Started | pinia-plugin-persistedstate

npm i pinia-plugin-persistedstate

main.ts にプラグインを追加します。

1
2
3
4
5
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

使用方法

使用方法は簡単で永続化するストアに persist: true のオプションを追加するだけです。

option store の書き方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
import { defineStore } from 'pinia'

export const useStore = defineStore('main', {
  state: () => {
    return {
      someState: 'hello pinia',
    }
  },
  persist: true,
})

setup store の書き方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
import { defineStore } from 'pinia'

export const useStore = defineStore(
  'main',
  () => {
    const someState = ref('hello pinia')
    return { someState }
  },
  {
    persist: true,
  },
)

他の永続化ライブラリ

僕は使用しませんでしたが他に以下のようなライブラリがあるようです。

参考

Getting Started | pinia-plugin-persistedstate

【Vue3 + Typescript】Pinia のデータを永続化する方法