Copy & Paste Engineer

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

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

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

環境情報

pinia のデータを永続化する

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

インストール

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

npm i pinia-plugin-persistedstate

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

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

使用方法

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

import { defineStore } from 'pinia'

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

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

他の永続化ライブラリ

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

参考