怎么解决vuex刷新页面后丢失数据=>vuex-persistedstate
2021-01-07 23:02:51 1105浏览
怎么解决vuex刷新页面后丢失数据=>vuex-persistedstate
标题:解决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中
vuex-persistedstate默认持久化所有state,指定需要持久化得state,配置如下:
注意:如果此刻想配置多个选项,将plugins写成一个一维数组,不然会报错。
当页面刷新后,想保存页面未保存得数据。我们总是习惯于放在浏览器得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"想要存储到sessionStorage,配置如下:
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})
import createPersistedState from "vuex-persistedstate"想使用cookie或localStorage同理
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage
})]
})
vuex-persistedstate默认持久化所有state,指定需要持久化得state,配置如下:
import createPersistedState from "vuex-persistedstate"此刻得val 对应store/modules文件夹下几个js文件存储得内容,也就是stor/index中import得9个模块,希望哪一部分得数据持久存储,将数据得名字在此配置就可以,目前我只想持久化存储user模块得数据。文件夹目录如下:
const store = new Vuex.Store({
// ...
plugins: [createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中得user
user: val.user
}
}
})]
注意:如果此刻想配置多个选项,将plugins写成一个一维数组,不然会报错。
import createPersistedState from "vuex-persistedstate"好的,今天就写到这里吧,写作真的是不易,主要能帮到广大编程爱好者就可以,如果您在编程的过程中遇到任何问题可以来杰凡IT编程问答平台上提问,平台上大佬很多,平台网址:https://www.jf3q.com
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]
})
好博客就要一起分享哦!分享海报
此处可发布评论
评论(0)展开评论
暂无评论,快来写一下吧
展开评论