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

<1>插件地址：

　　

<2>插件原理：

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

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

<3>使用方法

安装：npm install --save vuex-solidification使用：    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存储的状态并不理想。人们可以轻松地实现功能使用（或任何其他你可以想到的）;

　　

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 })

其他介绍见官网