关于页面刷新vuex数据消失问题解决方案


Posted in Javascript onJuly 03, 2017

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 ? 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刷新的时候出现数据消失

Javascript 相关文章推荐
javascript打开新窗口同时关闭旧窗口
Jan 16 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
jquery 常用操作方法
Jan 28 Javascript
改变状态栏文字的js代码
Jun 13 Javascript
jquery ajax双击div可直接修改div中的内容
Mar 04 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
Angular.JS学习之依赖注入$injector详析
Oct 20 Javascript
loading动画特效小结
Jan 22 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
Vue 进入/离开动画效果
Dec 26 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 #Javascript
vue.js学习之UI组件开发教程
Jul 03 #Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 #Javascript
Vue.js实例方法之生命周期详解
Jul 03 #Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 #Javascript
Async Validator 异步验证使用说明
Jul 03 #Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 #Javascript
You might like
php判断变量类型常用方法
2012/04/24 PHP
关于尾递归的使用详解
2013/05/02 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jquery中each方法示例和常用选择器
2014/07/08 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
将Vue组件库更换为按需加载的方法步骤
2020/05/06 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python的gevent框架的入门教程
2015/04/29 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
Talbots官网:美国成熟女装品牌
2019/11/15 全球购物
贯彻学习两会心得体会范文
2014/03/17 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
志愿者事迹材料
2014/12/26 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
php将xml转化对象的实例详解
2021/11/17 PHP