Vuex的插件vuex-persistedstate数据持久化存储-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vuex的插件vuex-persistedstate数据持久化存储。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、安装插件

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

二、使用方法

用sessionStorage缓存上面state的数据，key名为store文章来源地址https://www.toymoban.com/news/detail-755115.html

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

到了这里，关于Vuex的插件vuex-persistedstate数据持久化存储的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！