VBox持续进行中,哀家苦啊,有没有谁给个star。
vuex是vue用于数据存储的,和redux充当同样的角色。
最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。
网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB)。
这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下。
这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡着了。
醒了后,最初想采用 柯里化和高阶函数来解决这个问题,很可惜,没有正解。
最小化修改,又不想动现有代码,代理二字最为不过。记得上次我写IBook之初,也用Proxy来拦截修改,同时存数据到磁盘文件。
没错方案就是 ES6的Proxy,尝试之后,确实是可以的。
源码地址:https://github.com/xiangwenhu/vbox/tree/master/src/utils
这里有两个问题
1. 初始值的问题。
2. 我要可以配置哪些字段需要持久化,store里面的数据,不代表我都需要持久化。
首先解决是 localStorage存储的问题,因为需要转换字符串,简单封装一个 LStorage.js,当然你也可以用 https://github.com/tsironis/lockr , https://github.com/nbubna/store 或者你喜欢的,小轮子我就自己写了。
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) } }
其次就是代理的简单封装,LSproxy.js
这个版本还是有问题的,现在只能代理二级属性,对现在的我而言已经是够用了的。
createHanlder 创建二级属性的代理
copy 复制对象,当然你可以写更加兼容优雅的方法
proxy 创建state的代理
import LStorage from './LStorage' /** * 代理二级属性 * @param {*} lsKey 存在localStorage的key * @param {*} pk 一级属性的key */ function createHanlder(lsKey, pk) { return { set: function (target, key, value, receiver) { let item = LStorage.getItem(lsKey) if (item && item[pk]) { item[pk][key] = value LStorage.setItem(lsKey, item) } return Reflect.set(target, key, value, receiver) } } } /** * 仅仅存需要存放的数据 * @param {*} source * @param {*} keys */ function copy(source, keys = []) { if (!source) { return source } let d = Object.create(null) keys.forEach(k => { d[k] = source[k] }) return d } /** * 代理state * @param {*} initState 初始化的值 * @param {*} lsKey localStorage的key * @param {*} keys 需要存储的键 */ const proxy = function (initState, lsKey, keys = []) { let ks = keys, obj = Object.assign({}, initState, LStorage.getItem(lsKey)) // 代理二级属性 keys.forEach(k => { obj[k] = new Proxy(obj[k], createHanlder(lsKey, k)) }) // 存入合并的值 LStorage.setItem(lsKey, copy(obj, keys)) return new Proxy(obj, { set: function (target, key, value, receiver) { ks.indexOf(key) >= 0 && LStorage.setItem(lsKey, copy(target, keys)) return Reflect.set(target, key, value, receiver) } }) } export { proxy }
调用这边,基本就没有什么变化, 就多了一句 state = proxy(state, 'playing', ['list'])
import { proxy } from '../utils/LSProxy' let state = { list: [], current: null } state = proxy(state, 'playing', ['list']) const mutations = { /** * 添加歌曲 * @param {*} state * @param {*} song 歌曲信息 */ addSong(state, song) { let index = state.list.findIndex(s => s.songmid === song.songmid) if (index < 0) { state.list.push(song) } }, /** * 添加歌曲 * @param {*} state 内置 * @param {*} songs 歌曲列表 */ addSongs(state, songs) { let index = -1 songs.forEach(song => { index = state.list.findIndex(s => s.songmid === song.songmid) if (index < 0) { state.list.push(song) } }) }, /** * 删除歌曲 * @param {*} state * @param {*} songmid 歌曲媒体id */ removeSong(state, songmid) { let index = state.list.findIndex(s => s.songmid === songmid) index >= 0 && state.list.splice(index, 1) }, /** * 批量删除歌曲 * @param {*} state * @param {*} songmids 歌曲媒体列表 */ removeSongs(state, songmids = []) { let index = -1 songmids.forEach(songmid => { index = state.list.findIndex(s => s.songmid === songmid) index >= 0 && state.list.splice(index, 1) }) }, /** * 播放下一首, * @param {*} state * @param {*} song 为空 */ next(state, song) { // 如果song不为空,表示是插放,(前提是已经添加到playing) if (song) { let index = state.list.findIndex(s => s.songmid === song.songmid) if (index >= 0) { state.current = state.list[index] return } return } // 如果current为空,表示没有播放的歌曲 if (!state.current && state.list && state.list.length > 0) { state.current = state.list[0] return } // 如果不是插放,并且current不为空 if (!song && state.current) { // 播放的歌曲是不是在当前的列表 let index = state.list.findIndex(s => s.songmid === state.current.songmid) // 如果在歌曲列表里面,接着播放下首 if (index >= 0) { state.current = (index === state.list.length - 1 "_blank" href="https://www.jb51.net/article/117701.htm">解决VUEX刷新的时候出现数据消失
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]