Vuex持久化插件（vuex-persistedstate）解决页面刷新vuex数据丢失的问题

想要在页面刷新后保存数据，原始的方法就是将数据放在浏览器的sessionStorage和localStorage中，现在还可以使用vuex来存储数据

vuex与sessionStorage的比较：

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

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

vuex可以进行全局的状态管理，但是刷新页面数据会丢失这会导致项目开发变得棘手，那现在有两种解决方式

1. 手动利用本地存储

基本思路：由于我们是在页面刷新的时候才会丢失state里的数据，那么我们可以在页面你刷新之前先将state数据保存到sessionStorage，然后再刷新页面。这时候我们就可以用到beforeunload这个事件，但是总不能每个页面都监听这个事件吧，所以我们把它放在app.vue这个入口文件中，就可以保证每次刷新页面都可以触发。

具体代码如下：

export default {
  name: 'myApp',
  created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
    } 

    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}

但是手动写毕竟是比较麻烦的，那么我们可以利用插件

2. 利用vuex-persistedstate插件

这个插件的原理其实也是结合了存储方式，只是统一配置后就不需要手动写存储方法了

具体使用方法如下:

（1） 安装

npm install vuex-persistedstate --save

（2）在store下的index.js中引入并配置

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'

export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        createPersistedState(),  
    ],
})

这样是默认存储到localStorage，如果想要存储到sessionStorage，配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        // 把vuex的数据存储到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,    
        }),  
    ],
})

同理也可以存储到cookie下

默认持久化所有的state，如果想要存储指定的state，配置如下

import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
export default createStore({  
    state: {  },  
    mutations: {  },  
    actions: {  },  
    modules: {  },  
    plugins: [    
        // 把vuex的数据存储到sessionStorage    
        createPersistedState({      
            storage: window.sessionStorage,      
            reducer(val) {        
                return {          
                    // 只存储state中的userData          
                    userData: val.userData        
                }      
            }    
        }),  
    ],
})

API

key: 存储持久状态的key（默认vuex）

paths ：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

reducer ：一个函数，将被调用来基于给定的路径持久化的状态。默认包含这些值。

subscriber ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

storage ：而不是（或与）getState和setState。默认为localStorage。

getState ：将被调用以重新水化先前持久状态的函数。默认使用storage。

setState ：将被调用来保持给定状态的函数。默认使用storage。

filter ：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true