Added state storage and persistence

.eslintrc.js

@@ -146,6 +146,7 @@ module.exports = {
     // ECMAScript 6
     // These rules are only relevant to ES6 environments and are off by default.
     'no-var': 2,
+    'promise/param-names': 0,
 
     // Vue.js
     'vue/max-attributes-per-line': 0,

package.json

@@ -20,12 +20,15 @@
     "esm": "^3.2.22",
     "express": "^4.16.4",
     "helmet": "^3.16.0",
+    "localforage": "^1.7.3",
     "mongoose": "^5.5.2",
     "morgan": "^1.9.1",
     "serve-static": "^1.13.2",
     "sharp": "^0.22.0",
     "vue": "^2.6.6",
     "vue-router": "^3.0.1",
+    "vuex": "^3.1.0",
+    "vuex-persist": "^2.0.0",
     "winston": "^3.2.1",
     "ws": "^6.2.1"
   },

src/App.vue

@@ -5,9 +5,25 @@
       <router-link to="/about">About</router-link>
     </div>
     <router-view />
+    <button @click="increment">Increment</button>
+    <button @click="decrement">Decrement</button>
+    {{ count }}
   </div>
 </template>
 
+<script>
+import { mapActions, mapState } from 'vuex'
+export default {
+  name: 'Home',
+  computed: {
+    ...mapState(['count'])
+  },
+  methods: {
+    ...mapActions(['increment', 'decrement'])
+  }
+}
+</script>
+
 <style>
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

src/components/HelloWorld.vue

@@ -41,7 +41,6 @@ export default {
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 h3 {
   margin: 40px 0 0;

src/functions.js

@@ -0,0 +1 @@
+export const delay = ms => new Promise(res => setTimeout(res, ms))

src/main.js

@@ -1,10 +1,12 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store/'
 
 Vue.config.productionTip = false
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/store/actions.js

@@ -0,0 +1,11 @@
+import { delay } from '../functions'
+
+export default {
+  async increment({ commit }) {
+    commit('increment')
+  },
+
+  async decrement({ commit }) {
+    commit('decrement')
+  }
+}

src/store/index.js

@@ -0,0 +1,30 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import VuexPersistence from 'vuex-persist'
+import localforage from 'localforage'
+import mutations from './mutations'
+import actions from './actions'
+
+Vue.use(Vuex)
+
+const PRODUCTION_MODE = process.env.NODE_ENV === 'production'
+
+const vuexLocal = new VuexPersistence({
+  storage: localforage,
+  asyncStorage: true,
+  key: 'webexpe-state',
+  strictMode: !PRODUCTION_MODE
+})
+
+export default new Vuex.Store({
+  state: {
+    count: 0
+  },
+  mutations: {
+    RESTORE_MUTATION: !PRODUCTION_MODE ? vuexLocal.RESTORE_MUTATION : undefined,
+    ...mutations
+  },
+  actions,
+  strict: !PRODUCTION_MODE,
+  plugins: [vuexLocal.plugin]
+})

src/store/mutations.js

@@ -0,0 +1,9 @@
+export default {
+  increment(state) {
+    state.count++
+  },
+
+  decrement(state) {
+    state.count--
+  }
+}

yarn.lock

@@ -2250,6 +2250,11 @@ circular-json@^0.3.1:
   resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66"
   integrity sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==
 
+circular-json@^0.5.5:
+  version "0.5.9"
+  resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.5.9.tgz#932763ae88f4f7dead7a0d09c8a51a4743a53b1d"
+  integrity sha512-4ivwqHpIFJZBuhN3g/pEcdbnGUywkBblloGbkglyloVjjR3uT6tieI89MVOfbP2tHX5sgb01FuLgAOzebNlJNQ==
+
 class-utils@^0.3.5:
   version "0.3.6"
   resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463"
@@ -4869,6 +4874,11 @@ ignore@^5.0.2:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.0.6.tgz#562dacc7ec27d672dde433aa683c543b24c17694"
   integrity sha512-/+hp3kUf/Csa32ktIaj0OlRqQxrgs30n62M90UBpNd9k+ENEch5S+hmbW3DtcJGz3sYFTh4F3A6fQ0q7KWsp4w==
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -5625,6 +5635,13 @@ levn@^0.3.0, levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 linkify-it@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.1.0.tgz#c4caf38a6cd7ac2212ef3c7d2bde30a91561f9db"
@@ -5695,6 +5712,13 @@ loader-utils@^1.0.2, loader-utils@^1.1.0:
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+localforage@^1.7.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/localforage/-/localforage-1.7.3.tgz#0082b3ca9734679e1bd534995bdd3b24cf10f204"
+  integrity sha512-1TulyYfc4udS7ECSBT2vwJksWbkwwTX8BzeUIiq8Y07Riy7bDAAnxDaPU/tWyOVmQAcWJIEIFP9lPfBGqVoPgQ==
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -9499,6 +9523,19 @@ vue@^2.6.6:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==
 
+vuex-persist@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vuex-persist/-/vuex-persist-2.0.0.tgz#5f1759e4c969f405bb23416e8c8c8b5c1dca535d"
+  integrity sha512-BG5iOlthnXBCMp1tZpUTc/pvn+81fyEwx+1sYar1ktEZukbGHEsB5yIAydXeoWxUW416oj4/2Qfjrd/noqkoxQ==
+  dependencies:
+    circular-json "^0.5.5"
+    lodash.merge "^4.6.1"
+
+vuex@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.0.tgz#634b81515cf0cfe976bd1ffe9601755e51f843b9"
+  integrity sha512-mdHeHT/7u4BncpUZMlxNaIdcN/HIt1GsGG5LKByArvYG/v6DvHcOxvDCts+7SRdCoIRGllK8IMZvQtQXLppDYg==
+
 watchpack@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00"