Vuex的插件vuex-persistedstate数据持久化存储

一、安装插件

yarn add vuex-persistedstate
// 或
npm install --save vuex-persistedstate

二、使用方法

用sessionStorage缓存上面state的数据，key名为store

import Vue from 'vue'
import Vuex from 'vuex'
// 引入插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
const state = {};
const mutations = {};
const actions = {};
const store = new Vuex.Store({
	state,
	mutations,
	actions,
    /* vuex数据持久化配置 */
	plugins: [
		createPersistedState({
            // 存储方式：localStorage、sessionStorage、cookies  默认: localStorage
			storage: window.sessionStorage,
            // 存储的 key 的key值
			key: "store",
			render(state) {
                // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
				return { ...state };
			}
		})
	]
});
export default store;

三、缓存State下的部分数据

import Vue from 'vue'
import Vuex from 'vuex'
// 引入插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
const state = () => {
    return {
        token: '',
        uid: ''
    }
}
const store = new Vuex.Store({
    // ...
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer(val) {  // val就是上面的state
            return {
                // 只储存state中的token，而不会缓存uid
                token: val.token
            }
        }
    })]
})

四、缓存Vuex多个模块下的指定某个模块的state，通过修改path配置来实现

/* user-module */
export const user = {
    state: {
        token: '',
        role: ''
    }
}
/* profile-module */
export const profile = {
    state: {
        name: '',
        company: ''
    }
}
/* modules目录下的index.js */
import user from './user'
import profile from './profile'
export default {
    user,
    profile
}
/* store.js */
import modules from './modules'
let store = new Vuex.Store({
    modules,
    plugins: [
        createPersistedState({
            key: 'zdao',
            paths: ['user'] // 这里便只会缓存user下的state值
        })
    ]
})

手机扫描二维码访问