Vuex-ORMとvuex-persistedstateの連携で半永続的データベースに！

みなさんこんにちは！やっしー(@YaCpotato )です！

今回は、Vuex-ORMを使って製作物（たぶんプロジェクト管理ツール？）を作るにあたり、データの保持に一役買ってくれたvuex-persistedstateを紹介しようと思います！

Vuex-ORMについてはこちら
https://github.com/vuex-orm

vuex-persistedstateについてはこちら
https://github.com/robinvdvleuten/vuex-persistevuexdstate

vuex-persistedstateとは

vuexのstoreの情報(変数？)をブラウザのCookieに保存することで、リロード等してもvuex内のデータが保持できるようになる

導入方法

驚くほど簡単でした

npm install --save vuex-persistedstate

でインスコしたら、
store.jsを

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import Project from './model/Project'
import Task from './model/Task'
import Current from './model/Current'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const database = new VuexORM.Database()

database.register(Project)
database.register(Task)
database.register(Current)

const store = new Vuex.Store({
  plugins: [VuexORM.install(database)]
})

export default store

この状態（vuex-persistedstateを使ってない状態）から、

import Vue from 'vue'
import Vuex from 'vuex'
import VuexORM from '@vuex-orm/core'
import Project from './model/Project'
import Task from './model/Task'
import Current from './model/Current'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const database = new VuexORM.Database()

database.register(Project)
database.register(Task)
database.register(Current)

const store = new Vuex.Store({
  plugins: [VuexORM.install(database),
            createPersistedState({ storage: window.sessionStorage })]
})

export default store

変わっているのは、const storeの宣言時のpluginsに書き足している、

createPersistedState({ storage: window.sessionStorage })

だけです。

これだけで、Vuexのstoreの情報が、リロードしても消えなくなりました！

VuexをDBとして使うVuex-ORMとの相性は抜群？？

でもやっぱ、プロジェクト管理なら、ソースコードにgitを使うだろうから、リポジトリにjsonファイルなり作成させてもらって、そこで管理する方がいいのかななんて思ったりします。

では今日はこの辺で失礼いたします！

ソースコードはgithubに置いていますがまだ開発中のものですのであしからず
https://github.com/YaCpotato/laravueStudy

よろしければTwitterのフォローもお願いします。
コードレビューとか送ってくれたらとても喜びます。
https://twitter.com/Yasshieeee

良い一週間を！

ーーーーーーーーーーーーーー
Name:やっしー
大学生。新卒即戦力という矛盾を達成するため日々勉強中。2020年卒業見込み。
研究：少ないデータでの機械学習(一般物体認識、GAN等)
言語：Vuejs,Nuxt,Vuex, Django,Laravel
TwitterID: @Yasshieeee
githubID: @YaCpotato
ーーーーーーーーーーーーーー