Vue Academy · レッスン

Piniaの永続化とDevtools

pinia-plugin-persistedstate、特定フィールドのみの永続化、Pinia devtoolsのタイムトラベル

「Piniaの永続化とDevtools」はCoddyKit上の無料Vue Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。

ストアの状態を永続化する

デフォルトでは、ページを再読み込みすると Pinia の状態は失われます。状態を保持するには、状態を localStorage または sessionStorage と同期する pinia-plugin-persistedstate プラグインを使用します。

プラグインをインストールする

Pinia インスタンスにプラグインを一度登録します。その後、各ストアで必要に応じて有効化できます。

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

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

ストアで永続化を有効にする

ストアのオプションに persist: true を設定します。これで、状態全体が自動的に保存および復元されます。

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

ストレージを選択する

storage オプションで保存先を選択します。タブを閉じたときに消去したいデータには sessionStorage を使用します。

persist: {
  storage: sessionStorage
}

一部のフィールドだけを永続化する

paths オプションで、保存する状態のキーを限定します。トークンは保持しつつ、一時的な UI フラグは保持したくない場合に適しています。

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

ストアのシリアライズ

永続化では、状態を JSON にシリアライズします。値は JSON で安全に扱えるもの、つまりプレーンオブジェクト、配列、文字列、数値である必要があります。関数、Map、クラスインスタンスにはカスタムシリアライザーが必要です。

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Pinia Devtools

Vue Devtools をインストールすると、Pinia 専用のパネルが追加されます。各ストアを調査したり、状態の変化をリアルタイムで確認したり、値を直接編集したりできます。

タイムトラベルデバッグ

すべてのアクションが Devtools のタイムラインに表示されます。タイムトラベルを使うと、以前の状態に戻ってバグを再現し、その後もう一度先へ進めます。

SSR とストアのハイドレーション

サーバーサイドレンダリングでは、サーバーがストアを設定し、その後クライアントが同じデータでハイドレーションしてマークアップを一致させる必要があります。状態が一致しないと、ハイドレーションの警告が発生します。

Nuxt で Pinia を使う

@pinia/nuxt モジュールは Pinia を Nuxt に組み込み、SSR のハイドレーションを自動的に処理します。サーバーレンダリング中に設定された状態はページにシリアライズされ、クライアントで復元されます。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

永続化と SSR の組み合わせ

注意が必要です。localStorage はサーバー上に存在しません。永続化プラグインはこれを検出してクライアント側でのみ実行するため、SSR のハイドレーションではサーバーの状態が使われ、その後に永続化の処理が適用されます。

理解度チェック

永続化と Devtools についての知識を確認します。

まとめ

永続化とツールについて学びました。

pinia-plugin-persistedstate は状態を local/session storage に保存します。
storage と paths のオプションで、保存先と保存対象を制御します。
状態は JSON にシリアライズされるため、値は JSON で安全に扱えるものである必要があります。
Devtools ではリアルタイムの調査とタイムトラベルが可能です。@pinia/nuxt は SSR のハイドレーションを処理します。

よくある質問

「Piniaの永続化とDevtools」レッスンは無料ですか？

はい。「Piniaの永続化とDevtools」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。

「Piniaの永続化とDevtools」で何を学びますか？

pinia-plugin-persistedstate、特定フィールドのみの永続化、Pinia devtoolsのタイムトラベルブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Vue Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Piniaの永続化とDevtools」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このVue Academyレッスンでコードを書いて実行できますか？

はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Vue Academyに戻る