当前位置: 首页> 文章列表> 怎么解决vuex刷新页面后丢失数据=>vuex-persistedstate

怎么解决vuex刷新页面后丢失数据=>vuex-persistedstate

最新
2021-01-07 23:02:51 112
K
擅长邻域:

技术小结:

标题:解决vuex在刷新页面之后丢失数据=>vuex-persistedstate
当页面刷新后,想保存页面未保存得数据。我们总是习惯于放在浏览器得sessionStorage和localStorage中。但是用了vue后,vuex便可以被应用了。

vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。

vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储得数据会丢失。

为了克服这个问题, vuex-persistedstate出现了~~

原理:
将vuex得state存在localStorage或sessionStorage或cookie中一份
刷新页面得一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相得实现了数据刷新不丢失
使用方法:
安装:
npm install vuex-persistedstate --save
1
引入及配置
在store下得index.js中
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})
想要存储到sessionStorage,配置如下:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})
想使用cookie或localStorage同理

vuex-persistedstate默认持久化所有state,指定需要持久化得state,配置如下:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中得user
user: val.user
}
}
})]
此刻得val 对应store/modules文件夹下几个js文件存储得内容,也就是stor/index中import得9个模块,希望哪一部分得数据持久存储,将数据得名字在此配置就可以,目前我只想持久化存储user模块得数据。文件夹目录如下:


注意:如果此刻想配置多个选项,将plugins写成一个一维数组,不然会报错。

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判断环境 vuex提示生产环境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
storage: window.sessionStorage
})
export default new Vuex.Store({
// ...
plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
好的,今天就写到这里吧,写作真的是不易,主要能帮到广大编程爱好者就可以,如果您在编程的过程中遇到任何问题可以来杰凡IT编程问答平台上提问,平台上大佬很多,平台网址:https://www.jf3q.com

写的很好呢,我要分享哦!

此处可发布评论

    暂无评论
    联系大神 有偿问答

    榜上有名--赚钱榜

    第一时间了解动态

    关注我们