LoginSignup
8

More than 5 years have passed since last update.

IndexedDBをVuexで使ってみる

Last updated at Posted at 2018-04-22

Vue-idbを使用する

これ。
https://github.com/ddgll/vue-idb
https://github.com/ddgll/vue-idb/wiki/4-Installation-with-vuex
wikiを読んだかんじ、vuexをインストールしていたほうがよさげ

vuexをインストールする

これをgit cloneしてくる
https://github.com/vuejs/vuex
vuexディレクトリに入り、そしてnpmインストール

npm install vuex --save
npm run dev

でlocalhost:8080にアクセスすると画面が表示される
ここまででvuexの準備は終わり

vue-idbをインストール

vuexディレクトリの中で

npm install vue-idb --save

これでインストールは終了

使ってみる

vuexのexampleの中にあるファイルにVueIdbの追記を行う

idb.jsファイル作成

vuex/example/counter/idb.js
import Vue from 'vue'
import VueIdb from 'vue-idb'

Vue.use(VueIdb)

export default new VueIdb({
  database: 'test',
  schemas: [
    { tests: 'id, label, created_at, updated_at' }
  ],
  options: {
    tests: { type: 'list', primary: 'id', label: 'title', updated_at: 'updated_at' }
  },
  apis: {
    bigs: {
      all: () => axios.get('/dev/data/data.json')
    }
  }
})

mainとなるjsに追記

vuex/example/counter/app.js
import VueIdb from './idb'

http://localhost:8080/counter/
にアクセスしてコンソールを見てみると

image.png

Create DB schemaの表示があるので、一旦接続はできているようです。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8