VueにてIndexedDBによるデータ永続化【備忘録】

はじめに

vuexをよく使うようになったので、備忘録。

ライブラリインストール

プロジェクトの作成とvuexの導入については省きます。ひととおりプロジェクトの準備ができたら、以下のライブラリを以下のしてください。

npm install vuex-persist localforage

設定

vuexを導入していれば、store/index.jsがあると思います。そうしたら、そのファイルに以下のように記述します。

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import VuexPersist from "vuex-persist"; // 追加
import localForage from "localforage"; // 追加

Vue.use(Vuex);
const vuexLocal = new VuexPersist({ // 追加
  storage: localForage,
  asyncStorage: true,
});
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: [vuexLocal.plugin], // 追加
});