如何解决vuex因浏览器刷新数据消失，保持数据持久化问题？

　　vuex的一个全局状态管理的插件，但是在浏览器刷新的时候，内存中的state会释放。通常的解决办法就是用本地存储的方式保存数据，然后再vuex初始化的时候再赋值给state，此过程有点麻烦。因此可以使用插件vuex-solidification来解决。

<1>插件地址：

　　https://www.npmjs.com/package/vuex-persistedstate

<2>插件原理：

　　vuex有一个hook方法：store.subscribe((mutation, state) => {}) 

　　每次在mutation方法执行完之后都会调用这个回调函数，返回执行完毕之后的state

<3>使用方法

安装：npm install --save vuex-persistedstate

 使用： import Vue from 'vue' import Vuex from 'vuex' //引入插件 import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex); const store = new Vuex.Store({ .... plugins: [ // 默认存储所有state数据到localstorage //加上这个就可以了  createPersistedState() ] })

<4>插件说明

　　createPersistedState([options])

　　key: String

　　　　 存储到localStorage, sessionStorage 中对象的key，默认为vuex

　　local: Object 和 session: Object

　　　　1.分别代表localStorage的配置和sessionStorage的配置

　　　　2.local 和 session 里面可以有: include: Array 和 exclude: Array

 例子：　

假设vuex中state为：
    state:{
        count:{
            value:0,
            name:"tom"
        },
        id:1
    }

(1)local：{ include：[] } 
    //设置localstorage里面存储的state
    
    createPersistedState({
        local: {
            include: ['count.value'] 
        }
    })

    /* 
        hook钩子触发之后，localstorage里面存储的对象为:
        {
            count: {
                value: 0,
            }
        }
    */

(2)local：{ exclude:[] } 
    //设置除了exclude之外 localstorage里面存储的state
    
    createPersistedState({
        local: {
            //除了count.value,其他state数据都存储
            exclude: ['count.value'] 
        }
    })
    
    /* 
        hook钩子触发之后，localstorage里面存储的对象为:
        {
            count: {
                name:"tom"
            },
            id:1
        }
    */

    
(3)session：{ include:[] } 
    //设置sessionstorage里面存储的state
    
    createPersistedState({
        session: {
            include: ['count.value'] 
        }
    })
    
    /* 
        hook钩子触发之后，sessionstorage里面存储的对象为:
        {
            count: {
                value: 0,
            }
        }
    */


(4)session：{ exclude:[] } 
    //设置除了exclude之外 sessionstorage里面存储的state
    
    createPersistedState({
        session: {
            exclude: ['count.value'] 
        }
    })
    /* 
        hook钩子触发之后，sessionstorage里面存储的对象为:
        {
            count: {
                name:"tom"
            },
            id:1
        }
    */


(5)同时设置local和session
    createPersistedState({
        local: {
            include: ['id']
        },
        session: {
            include: ['count'] 
        }
    })
    
    /* 
        hook钩子触发之后，
        localstorage里面存储的对象为:
        {
            id:1
        }
        
        sessionstorage里面存储的对象为:
        {
            count:{
                value:0,
                name:"tom"
            }
        }
    */

<5>自定义存储

　　如果在本地存储中存储Vuex存储的状态并不理想。人们可以轻松地实现功能使用cookie（或任何其他你可以想到的）;

　　

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

const store = new Store({
  // ...
  plugins: [
	createPersistedState({
	  storage: {
		getItem: key => Cookies.get(key),
		setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
		removeItem: key => Cookies.remove(key)
	  }
	})
  ]
})
	    

实际上，可以传递任何遵循存储协议（getItem，setItem，removeItem等）的对象：
　　createPersistedState({ storage: window.sessionStorage })

其他介绍见官网