菜单

刷新后再次获得的例证_vue,关于页面刷新vuex数据没非常一下子就解决了方案_vue

2020年4月9日 - 澳门太阳娱乐手机登录

VUEX 数据持久化

VBox持续进行中,哀家苦啊,有没有谁给个star。

// store.js getters: { userInfo { console.log; if  { let token = getStorage; console.log; if  { let userInfo = getStorage; state.userInfo = userInfo.data; } } return state.userInfo } },

vuex是vue用于数据存储的,和redux充当同样的角色。

注意:如果 使用this.$store.userInfo 是读取不到的,必须使用getter

最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零。这是头疼的问题。

// component.jsuserInfo() { return this.$store.getters.userInfo; }

网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储。

以上这篇VUEX
数据持久化,刷新后重新获取的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

澳门太阳娱乐手机登录,刷新后再次获得的例证_vue,关于页面刷新vuex数据没非常一下子就解决了方案_vue。这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个
mutation都去存一下。

这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡着了。

醒了后,最初想采用 柯里化和高阶函数来解决这个问题,很可惜,没有正解。

最小化修改,又不想动现有代码,代理二字最为不过。记得上次我写IBook之初,也用Proxy来拦截修改,同时存数据到磁盘文件。

没错方案就是 ES6的Proxy,尝试之后,确实是可以的。

源码地址:

2.
我要可以配置哪些字段需要持久化,store里面的数据,不代表我都需要持久化。

首先解决是 localStorage存储的问题,因为需要转换字符串,简单封装一个
LStorage.js,当然你也可以用 ,
或者你喜欢的,小轮子我就自己写了。

const ls = window.localStorage// https://github.com/tsironis/lockrexport default { getItem { try { return JSON.parse } catch  { return null } }, setItem { ls.setItem(key, JSON.stringify { ls.clear { return ls.keys { ls.removeItem }}

其次就是代理的简单封装,LSproxy.js

这个版本还是有问题的,现在只能代理二级属性,对现在的我而言已经是够用了的。

createHanlder 创建二级属性的代理

copy 复制对象,当然你可以写更加兼容优雅的方法

proxy 创建state的代理

import LStorage from './LStorage'/** * 代理二级属性 * @param {*} lsKey 存在localStorage的key * @param {*} pk 一级属性的key */function createHanlder { return { set: function (target, key, value, receiver) { let item = LStorage.getItem if  { item[pk][key] = value LStorage.setItem } return Reflect.set(target, key, value, receiver) } }}/** * 仅仅存需要存放的数据 * @param {*} source * @param {*} keys */function copy { if  { return source } let d = Object.create 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 // 代理二级属性 keys.forEach(k => { obj[k] = new Proxy(obj[k], createHanlder // 存入合并的值 LStorage.setItem(lsKey, copy return new Proxy(obj, { set: function (target, key, value, receiver) { ks.indexOf >= 0 && LStorage.setItem(lsKey, copy 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 { let index = state.list.findIndex(s => s.songmid === song.songmid) if  { state.list.push } }, /** * 添加歌曲 * @param {*} state 内置 * @param {*} songs 歌曲列表 */ addSongs { let index = -1 songs.forEach(song => { index = state.list.findIndex(s => s.songmid === song.songmid) if  { state.list.push }, /** * 删除歌曲 * @param {*} state * @param {*} songmid 歌曲媒体id */ removeSong { let index = state.list.findIndex(s => s.songmid === songmid) index >= 0 && state.list.splice }, /** * 批量删除歌曲 * @param {*} state * @param {*} songmids 歌曲媒体列表 */ removeSongs { let index = -1 songmids.forEach(songmid => { index = state.list.findIndex(s => s.songmid === songmid) index >= 0 && state.list.splice }, /** * 播放下一首, * @param {*} state * @param {*} song 为空 */ next { // 如果song不为空,表示是插放, if  { let index = state.list.findIndex(s => s.songmid === song.songmid) if  { 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  { state.current = (index === state.list.length - 1 ? state.list[0] : state.list[index + 1]) } else { state.current = state.list[0] } } }}export default { namespaced: true, state, mutations}

这种方案的缺点也是很明显的,

  1. 代码只能代理二级,对我一般情况应该是够用了,扁平化state

2.
代理二级属性和数组,要是属性平凡修改的时候,代理是会重复触发的,比如,添加30首歌曲的时候,是发生了30次存储。
当然我觉得也是有方案可以优化的。

优点我觉得是,

  1. state的数据与localStorage的同步过程分离开

  2. 对现有代码的注入是相当少的。

当然我上面代码本身也还是存在问题的

1.
二级监听不能在proxy执行的时候返回,因为如果属性默认值为null/undefined,或者初始化就没有设置默认值,是不会被监听到的,应该是放到一级属性监听里面,
进行一个判断

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

解决VUEX刷新的时候出现数据消失

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图