VUEX持久化存储之vuex-persistedstate

原创已于 2022-05-30 13:00:37 修改 · 659 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

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

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

本次记录利用插件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)
// }
// })
// ]
})