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刷新的时候出现数据消失
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。