vuex持久化 vuex-persistedstate

使用vuex时，如果刷新浏览器，则vuex中的数据就会丢失，但是有时候我们并不希望如此。例如全局相关的，如登录状态、token、以及一些不常更新的状态等，我们更希望能够固化到本地，减少无用的接口访问，以及更佳的用户体验。

1、安装

npm i -S vuex-persistedstate

2、在store.js中引入

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'; // vuex持久化,
Vue.use(Vuex);
const store = new Vuex.Store({
	state: {
		statusBarHeight: 0,
	},
	getters: {

	},
	mutations: {
		//设置手机状态栏高度
		setStatusBarHeight(state, height) {
			state.statusBarHeight = height;
		}
	},
	actions: {

	},
	plugins: [createPersistedState()],// 持久化：默认将vuex中的值保存到localStorage
});
export default store;

自定义存储：需要使用sessionStorage的情况

plugins: [
    persistedState({ storage: window.sessionStorage })
]

自定义存储：需要使用cookie的情况

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

export default new Vuex.Store({
	// ...
	plugins: [
		persistedState({
			storage: {
				getItem: key => Cookies.get(key),
				setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
				removeItem: key => Cookies.remove(key)
			}
		})
	]
})