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  默认: localStoragestorage: 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值        })    ]})

本文链接：https://www.kjpai.cn/news/2024-03-26/149145.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！