Nuxt.js vuex-persistedstateを使ってLocal Storageにデータを保存する

Nuxt.js vuex-persistedstateを使ってLocal Storageにデータを保存する

vuex-persistedstateの簡単な使い方のサンプルコードです。入力したテキストとカウンターにより増加させた数値をLocal Storageに保存します。

環境

  • OS  Ubuntu19.10
  • node v12.13.0
  • npm 6.12.1
  • Nuxt.js v2.10.2

vuex-persistedstateインストール

まずはvuex-persistedstateをインストールします。

vuetifyインストール

UIコンポーネントフレームワークで vuetify も利用するのでインストールしておく。

プロジェクト配下にあるnuxt.config.jsを編集しておきます。

vuex-persistedstateの使い方

plugins配下にlocalStorage.jsという名前でファイルを作成して、下記のコードを記述します。

次にnuxt.config.jsのplugins:に下記のコードを追加して設定します。

store配下にindex.jsという名前でファイルを作成して、下記のコードを記述します。

後はpages配下に、test.vueという名前で下記のコードを記述します。

※デザインには vuetify を利用してます。

ブラウザから http://プライベートIP:3000/testにアクセスすると、下記の画面が表示され、テキストを保存ボタンをクリックすると、入力したテキストが保存され、カウンターを追加ボタンをクリックするとカウンターの数値が増加し、値がリロードしても、保存されることが確認できます。