页面刷新后，想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。但是用了vue后，vuex便可以被应用了。

vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。

vuex劣势：在F5刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

为了克服这个问题， vuex-persistedstate出现了~~

原理：

• 将vuex的state存在localStorage或sessionStorage或cookie中一份
• 刷新页面的一瞬间，vuex数据消失，vuex回去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~

使用方法：

• 安装：

npm install vuex-persistedstate  --save

• 引入及配置

在store下的index.js中

 
import createPersistedState from "vuex-persistedstate"
 
const store = new Vuex.Store({ // ...
 
plugins: [createPersistedState()]
 
})

 

想要存储到sessionStorage，配置如下：

import createPersistedState from "vuex-persistedstate"
 
 
 
const store = new Vuex.Store({
 
// ...
 
plugins: [createPersistedState({
 
storage: window.sessionStorage
 
})]
 
})

 

想使用cookie或localStorage同理 

vuex-persistedstate默认持久化所有state，指定需要持久化的state,配置如下：

1.  
   import createPersistedState from "vuex-persistedstate"
    
   const store = new Vuex.Store({
    
   // ...
    
   plugins: [createPersistedState({
    
   storage: window.sessionStorage,
    
   reducer(val) {
    
   return { // 只储存state中的user
    
   user: val.user
    
   }
    
   }
    
   })]

    

此刻的val 对应store/modules文件夹下几个js文件存储的内容，也就是stor/index中import的9个模块，希望哪一部分的数据持久存储，将数据的名字在此配置就可以，目前我只想持久化存储user模块的数据。文件夹目录如下：

注意：如果此刻想配置多个选项，将plugins写成一个一维数组，不然会报错。

import createPersistedState from "vuex-persistedstate"
 
import createLogger from 'vuex/dist/logger'
 
// 判断环境 vuex提示生产环境中不使用
 
const debug = process.env.NODE_ENV !== 'production'
 
const createPersisted = createPersistedState({
 
storage: window.sessionStorage
 
})
 
export default new Vuex.Store({
 
// ...
 
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
 
})