vuex linkage data persistently stored sessionStorage

vuex linkage sessionStorage continuous data storage, to prevent users from manually refresh the page vuex cause data loss, error page problem

1. The method of using plugins vuex property implementation, the code is placed directly, (  sessionStorage.setItem  can encrypt the data, they also need to decrypt values)

. 1 const = Store sessionStoragePlugin => {
 2    store.subscribe ((mutation, State) => {
 . 3      Object.keys (State) .forEach ((Item, index) => {
 . 4        //   sessionStorage.setItem can encrypt the data , when the values need to decrypt 
. 5        window.sessionStorage.setItem (Item, the JSON.stringify (State [Item]))
 . 6      })
 . 7    })
 . 8  }
 . 9  
10 Export default sessionStoragePlugin

2. Status initialization

. 1 the let vuxdata = null 
2  the try {
 . 3    // If the session needs to decrypt the encrypted value here 
. 4    vuxdata the JSON.parse = (sessionStorage.getItem ( 'vuxdata')) || {}
 . 5 } the catch (error) {
 . 6    vuxdata = } {
 . 7  }
 . 8 const State = {
 . 9    One: vuxdata.one || null 
10  }
 . 11  
12 is Export default {
 13 is    State,
 14 }

 

3. The above things going on vuex exposed inside the plugin like

 1 import Vue from 'vue'
 2 
 3 import Vuex from 'vuex'
 4 
 5 import sessionStoragePlugin from './sessionStoragePlugin'
 6 
 7 import vuexdata from './vuexdata.js'
 8 
 9 Vue.use(Vuex)
10 
11 export default new Vuex.Store({
12   modules: {
13     vuexdata,
14   },
15   // strict: process.env.NODE_ENV !== 'production',
16   plugins: [sessionStoragePlugin]
17 })

 

 

 the above