页面刷新vuex数据消失问题解决方案 之 vuex中间件
之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案.
今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异。聊着聊着,同事咋不用 store.subscribe , 当时还有点觉得不可能,仔细再去看vuex官方文档。
这个还真的是可行,但当然也是存在不方便的地方的。
此方案现在已经应用我基于vue开发的音乐web app VBOX 上,欢迎大家给star.
基本方案和步骤如下
1. 简单的按照键复制对象
2. localStorage存储的封装
3. vuex插件编写
4. localStorage的数据还原和初始化 Vuex.Store
第一:简单的按照键复制对象
/**
* 数据简单复制
* @param {*} source
* @param {*} keys
*/
const copy = function (source, keys = []) {
if (!source) {
return source
}
let d = Object.create(null)
keys.forEach(k => { d[k] = source[k] })
return d
} export {
copy
}
第二:localStorage的简单封装
const ls = window.localStorage
// https://github.com/tsironis/lockr
export default {
getItem(key) {
try {
return JSON.parse(ls.getItem(key))
} catch (err) {
return null
}
},
setItem(key, val) {
ls.setItem(key, JSON.stringify(val))
},
clear() {
ls.clear()
},
keys() {
return ls.keys()
},
removeItem(key) {
ls.removeItem(key)
}
}
第三:vuex插件
主要是一个lsKey,存到localStorage的key,
另外一个是 mutation白名单,白名单内的触发不会触发数据同步
实际上这里是存在一定问题的,这里适用模块后的store
(1) 无法快速有效便捷的定位什么时候该触发同步
import ls from '../utils/LStorage'
import { copy } from '../utils/utils' export const createLSPlugin = function (lsKey, mappings, whitelist = []) {
let k = lsKey || 'lsKey'
return store => {
store.subscribe((mutation, state) => {
if (whitelist.findIndex(m => m === mutation.type) < ) {
let cd = Object.create(null)
Object.keys(state).forEach(k => {
if (mappings[k]) {
cd[k] = copy(state[k], mappings[k])
}
})
ls.setItem(k, cd)
}
})
}
}
第四:初始化Vuex.Store
主要是从localStore里面还原数据合并到state里面,如果state没有分模块还是比较简单的。
import Vue from 'vue'
import Vuex from 'vuex' import playing from './playing'
import player from './player'
import searchHistory from './searchHistory' import { createLSPlugin } from '../plugin/syncls'
import ls from '../utils/LStorage' const LS_KEY = 'vbox' const lsData = ls.getItem(LS_KEY)
let mapping = {
playing: ['list', 'current'],
player: ['mode'],
searchHistory: ['list'] }
let mWhiteList = ['player/timeUpdate', 'player/setState']
if (lsData) {
let { playing: ls_playing, player: ls_player, searchHistory: ls_searchHistory } = lsData
Object.assign(playing, { state: ls_playing })
Object.assign(player, { state: ls_player })
Object.assign(searchHistory, { state: ls_searchHistory })
} Vue.use(Vuex)
const plugin = createLSPlugin(LS_KEY, mapping, mWhiteList)
const store = new Vuex.Store({
modules: {
playing,
player,
searchHistory
},
plugins: [plugin]
}) export default store
优点
1. 代码简单,对代码改动不大
2. 对原始的state没有额外干预
缺点
1. 触发存储条件不好控制
2. 存储限制实现会相对复杂
页面刷新vuex数据消失问题解决方案 之 vuex中间件的更多相关文章
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- vue:vue页面刷新vuex数据消失问题
vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- JS页面刷新保持数据不丢失
转自:https://blog.csdn.net/qq_32439101/article/details/78134877 下面是 DOM Storage 的接口定义: interface Stora ...
- djano modles values+ajax实现无页面刷新更新数据
做项目的过程中想通过不刷新页面的方式来进行页面数据刷新,开始使用http://www.cnblogs.com/ianduin/p/7761400.html方式将查询结果数据进行序列化.发现可以行,但是 ...
- django中form页面刷新后自动提交的解决方案
如果一个页面包含了form,同时这个form中的提交按钮是type=submit的input的时候,你刷新该页面,就会有弹窗提示是否重新提交表单,这个特性不胜其烦,常见解决方法有两个: 第一种是前端的 ...
- [转]vue解决刷新页面vuex数据、params参数消失的问题
一般项目都会有一些逻辑需要传递值给另一个页面,那么有的时候就会出现一个问题:用户刷新了页面,诶?数据没了,参数错误.那么今天经过总结,解决了这个问题.我在最新的项目中,通过了一下几种情况进行传值: 1 ...
随机推荐
- Sagit.Framework For IOS 开发框架入门教程3:Start引导页及框架布局和隐藏事件的内幕
前言: 框架依旧在快速更新着:在重构.简化代码,统一标准的过程中. 中间也遇到各种坑,不过好在一步一脚印的解决了. 虽然还有些功能还在思考,不过教程,还是得补上: 上篇文章:Sagit.Framewo ...
- Spring的Bean内部方法调用无法使用AOP切面(CacheAble注解失效)
Spring的Bean内部方法调用无法使用AOP切面(CacheAble注解失效) 前言 今天在使用Spring cache的Cacheable注解的过程中遇见了一个Cacheable注解失效的问题, ...
- JavaWeb核心技术学习 - 1.从JDBC说起
作者:java1to3链接:http://www.cnblogs.com/java1to3/著作权归作者所有.未经作者本人同意,禁止一切转载.商业或非商业转载请联系作者获得授权并请注明出处. ・JDB ...
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- Django配置session
在settings.py文件里加入 #配置失效时间为半个小时 SESSION_COOKIE_AGE = 60*30 #关闭浏览器清除cookie SESSION_EXPIRE_AT_BROWSER_C ...
- 基于FPGA的图像显示
基于FPGA的图像显示 作者:lee神 这几天一直在调试FPGA的图像显示系统,今天终于成功,图像不在闪烁,也不再边框缺失. 基于FPGA的图像处理的第一课应该是基于FPGA的图像显示,只有图像正常显 ...
- sql语句百万数据量优化方案
一:理解sql执行顺序 在sql中,第一个被执行的是from语句,每一个步骤都会产生一个虚拟表,该表供下一个步骤查询时调用,比如语句:select top 10 column1,colum2,max( ...
- ViewPager+Fragment 懒加载
转载于: 作者:尹star链接:http://www.jianshu.com/p/c5d29a0c3f4c來源:简书 ViewPager+Fragment的模式再常见不过了,以国民应用微信为例,假 ...
- 《TCP-IP详解卷1:协议》【PDF】下载
<TCP-IP详解卷1:协议>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062539 内容简介<TCP/IP详解卷1:协 ...
- spring boot oauth2的一些记录
oauth2及时从一个项目A申请另一个项目B的访问的时候,不用在项目A输入项目B的用户名和密码,个人理解先跳转到项目B,利用项目B的用户名和密码得到一个code之类的,这里有点像openID,不过不是 ...