在页面刷新的时候， vuex 会初始化 state，这样 vuex 里面的有些值便会丢失。遇到这样的问题，我们一般需要配合本地存储来实现数据的持久化。（我们使用 localStorage 为例，也可以使用 sessionStorage、cookie）
1、配合本地存储
登录的时候需要存一下用户名和token，一般分别在 vuex 里面和本地都存一份
//拿到数据之后存储在 vuex 和 本地localStorage.setItem('name', name);this.$store.dispatch('token', token);//清空数据时，分别清空 vuex 和 本地localStorage.removeItem('name');this.$store.dispatch('token', '');//state.js 里面name: localStorage.getItem('name') ? localStorage.getItem('name') : '',token: localStorage.getItem('token') ? localStorage.getItem('token') : ''
这样能很好实现 vuex 数据的持久化，但是每一次数据的获取清除都需要写两个，很麻烦！我们也可使用插件来帮我们实现。
2、 插件 vuex-persistedstate
vuex-persistedstate 这个插件的原理是将 vuex 的 state 存到localStorage或sessionStorage或cookie中一份
安装：
npm install vuex-persistedstate --save
在store的index.js里面引入：
import persistedState from "vuex-persistedstate";export default new Vuex.Store({state,actions,mutations,plugins: [persistedState({storage: window.sessionStorage, // 指定数据存储的位置，默认是localStorage reducer(val) {// 存储指定statereturn {// val 是statename:val.name,token:val.token}}})]})
也可以创建新的插件实例，然后引入到 vuex 文件的 plugins 对象中。
import persistedState from "vuex-persistedstate";const persisted = persistedState({storage: window.sessionStorage, // 指定数据存储的位置，默认是localStorage paths:['name','token']})export default new Vuex.Store({state,actions,mutations,plugins: [persisted]})
使用cookie
import persistedState from "vuex-persistedstate";import * as Cookies from 'js-cookie'export default new Vuex.Store({state,actions,mutations,plugins: [persistedState({storage: {getItem: (key) => Cookies.get(key),setItem: (key,value) => Cookies.set(key,value,{expires: 8}),removeItem: (key) => Cookies.remove(key)}})]})
3、插件 vuex-along
vuex-along 跟上面插件效果一样
安装：
npm install vuex-along --save
在store的index.js里面引入：
import vuexAlong from 'vuex-along';export default new Vuex.Store({state,actions,mutations,plugins: [vuexAlong ({name:'along', // 设置本地数据集合的名字，默认为 vuex-alonglocal: {list:['name','token'], // 是否存放在local中 false 不存放 如果存放按照下面session的配置配isFilter:true // 过滤 list 中的字段而非保存},session:false //是否存放在 session 中 false 是不存放})]})
