VUEX持久化存储之vuex-persistedstate

披荆斩棘的大龄程序员

已于 2022-05-30 13:00:37 修改

阅读量603

点赞数 1

于 2022-05-30 13:00:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_40065748/article/details/125044478

版权

博客记录了利用插件vuex-persistedstate解决vuex持久化存储的方案。首先介绍了使用npm安装该插件的命令，接着给出了在store/index.js中的代码示例，包含使用sessionStorage、localStorage和cookie三种不同存储方式的配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次记录利用插件vuex-persistedstate解决vuex持久化存储的方案

1、安装

npm i -s vuex-persistedstate

2、store/index.js中

import Vue from 'vue'

import Vuex from 'vuex'

import tab from './tab'

// import * as Cookies from 'js-cookie' // 使用方式二时需引入

import persistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({

modules:{

tab

},

//方式一，使用sessionStorage

plugins: [

persistedState({ storage: window.sessionStorage })

]

// 方式二：使用localStorage的情况
// plugins: [
// persistedState({ storage: window.localStorage })
// ]

// 方式三：使用cookie的情况
// plugins: [
// persistedState({
// storage: {
// getItem: key => Cookies.get(key),
// setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
// removeItem: key => Cookies.remove(key)
// }
// })
// ]
})