VuexでIndexedDBのコネクション管理

HTML5の勉強してたら出てきた"Indexed DataBase API"を使ってみたかったんです

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    db: null, 
  },

  mutations: {
    DB_CONNECTION: (state, payload) => (state.db = payload),
  },

  actions: {
   createDatabase({ commit }) {

      // ブラウザにより異なるらしい
      const indexedDB = window.indexedDB || window.mozIndexedDB || window.msIndexedDB

      if (indexedDB) {
        var dbOpen = indexedDB.open(`${YOUR_DATABASE_NAME}`, 1.0) // 第2引数はversion

        // データベースがない場合、既存のversionよりも大きい引数でopenした場合
        dbOpen.onupgradeneeded = function(event) {
          const dbConnection = event.target.result
          // スキーマを作成する
          const store = dbConnection.createObjectStore(`${YOUR_STORE_NAME}`, { // store = テーブルのようなもの
            keyPath: `id`,         // 主キー用
            autoIncrement: true    // オートインクリメントを有効にしておかないとレコード挿入時に指定必須
          })
          store.createIndex('contentIndex', `${YOUR_INDEX}`) // index = カラムのようなもの
          commit('DB_CONNECTION', dbConnection)
        }

        // 接続成功の場合
        dbOpen.onsuccess = function(event) {
          commit('DB_CONNECTION', event.target.result)
        }
      } else {
        // IndexedDB使用不可
      }
    },
  },
})

あとはVueのインスタンス作成した時にdispatchで呼んで、以後はstateのdbを参照すればOK