# 【Vue3 + Typescript】Pinia のデータを永続化する方法
> Vue3 & Typescript 環境で Pinia のデータを永続化する方法メモ
- Canonical: https://c-a-p-engineer.github.io/vue3-typescript-pinia-persisted/
- Published: 2022-12-19T15:30:00.000Z
- Modified: 2022-12-19T15:30:00.000Z
- Categories: JavaScript
- Tags: JavaScript, TypeScript
# 【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` にプラグインを追加します。
``` ts:main.ts {linenos=table,hl_lines=["2-5"]}
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
```
### 使用方法
使用方法は簡単で永続化するストアに `persist: true` のオプションを追加するだけです。
* option store の書き方
```ts
import { defineStore } from 'pinia'
export const useStore = defineStore('main', {
state: () => {
return {
someState: 'hello pinia',
}
},
persist: true,
})
```
* setup store の書き方
```ts
import { defineStore } from 'pinia'
export const useStore = defineStore(
'main',
() => {
const someState = ref('hello pinia')
return { someState }
},
{
persist: true,
},
)
```
## 他の永続化ライブラリ
僕は使用しませんでしたが他に以下のようなライブラリがあるようです。
* iendeavor/pinia-plugin-persistedstate-2
* Seb-L/pinia-plugin-persist
## 参考
* Getting Started | pinia-plugin-persistedstate