【Vue.js】Pinia × LocalStorageで永続的な状態管理を行う方法

Vue.jsにおける状態管理ライブラリとしてPiniaは非常にシンプルかつ強力です。しかし、通常の状態管理はリロードやタブを閉じた際にリセットされてしまうため、LocalStorageなどを併用して「永続化」することで、より実用的なデータ保持が可能になります。本記事では、PiniaとLocalStorageを組み合わせて、状態を永続的に管理する方法を紹介します。

Piniaでの基本的な状態管理
LocalStorageと連携して永続化する方法
1. main.jsで永続化ロジックを追加
動作確認：データが永続化される
セキュリティと注意点
まとめ

Piniaでの基本的な状態管理

まず、Piniaストアを作成します。以下はユーザー名を保持するシンプルな例です。

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    username: '',
  }),
  actions: {
    setUsername(name) {
      this.username = name;
    },
  },
});

LocalStorageと連携して永続化する方法

状態の保存と復元には、Piniaの`subscribe`メソッドを使って、状態が変更されるたびにLocalStorageへ書き込みます。初期化時にはLocalStorageからデータを読み取ってストアに反映します。

main.jsで永続化ロジックを追加

// main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import { useUserStore } from './stores/user';

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);

// ストア初期化後にLocalStorageから復元
const userStore = useUserStore();

const savedData = localStorage.getItem('user');
if (savedData) {
  const parsed = JSON.parse(savedData);
  userStore.$patch(parsed);
}

// ストアの変更をLocalStorageに保存
userStore.$subscribe((mutation, state) => {
  localStorage.setItem('user', JSON.stringify(state));
});

app.mount('#app');