如何实现一个简易版的vuex持久化工具


Posted in Javascript onSeptember 11, 2019

背景

最近用uni-app开发小程序项目时,部分需要持久化的内容没法像其他vuex中的state那样调用,所以想着自己实现一下类似vuex-persistedstate插件的功能,貌似代码量也不会很大

初步思路

首先想到的实现方式自然是vue的watcher模式。对需要持久化的内容进行劫持,当内容改变时,执行持久化的方法。
先弄个dep和observer,直接observer需要持久化的state,并传入get和set时的回调:

function dep(obj, key, options) {
 let data = obj[key]
 Object.defineProperty(obj, key, {
  configurable: true,
  get() {
   options.get()
   return data
  },
  set(val) {
   if (val === data) return
   data = val
   if(getType(data)==='object') observer(data)
   options.set()
  }
 })
}
function observer(obj, options) {
 if (getType(obj) !== 'object') throw ('参数需为object')
 Object.keys(obj).forEach(key => {
  dep(obj, key, options)
  if(getType(obj[key]) === 'object') {
   observer(obj[key], options)
  }
 })
}

然而很快就发现问题,若将a={b:{c:d:{e:1}}}存入storage,操作一般是xxstorage('a',a),接下来无论是改了a.b还是a.b.c或是a.b.c.d.e,都需要重新执行xxstorage('a',a),也就是无论a的哪个后代节点变动了,重新持久化的都是整个object树,所以监测到某个根节点的后代节点变更后,需要先找到根节点,再将根节点对应的项重新持久化。

接下来的第一个问题就是,如何找到变动节点的父节点。

state树的重新构造

如果沿着state向下找到变动的节点,并根据找到节点的路径确认变动项,复杂度太高。

如果在observer的时候,对state中的每一项增添一个指向父节点的指针,在后代节点变动时,是不是就能沿着指向父节点的指针找到相应的根节点了?

为避免新增的指针被遍历到,决定采用Symbol,于是dep部分变动如下:

function dep(obj, key, options) {
 let data = obj[key]
 if (getType(data)==='object') {
  data[Symbol.for('parent')] = obj
  data[Symbol.for('key')] = key
 }
 Object.defineProperty(obj, key, {
  configurable: true,
  get() {
   ...
  },
  set(val) {
   if (val === data) return
   data = val
   if(getType(data)==='object') {
    data[Symbol.for('parent')] = obj
    data[Symbol.for('key')] = key
    observer(data)
   }
   ...
  }
 })
}

再加个可以找到根节点的方法,就可以改变对应storage项了

function getStoragePath(obj, key) {
 let storagePath = [key]
 while (obj) {
  if (obj[Symbol.for('key')]) {
   key = obj[Symbol.for('key')]
   storagePath.unshift(key)
  }
  obj = obj[Symbol.for('parent')]
 }
 // storagePath[0]就是根节点,storagePath记录了从根节点到变动节点的路径
 return storagePath 
}

但是问题又来了,object是可以实现自动持久化了,数组用push、pop这些方法操作时,数组的地址是没有变动的,defineProperty根本监测不到这种地址没变的情况(可惜Proxy兼容性太差,小程序中安卓直接不支持)。当然,每次操作数组时,对数组重新赋值可以解决此问题,但是用起来太不方便了。

改变数组时的双向绑定

数组的问题,解决方式一样是参照vue源码的处理,重写数组的'push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'方法
数组用这7种方法操作数组的时候,手动触发set中部分,更新storage内容

添加防抖

vuex持久化时,容易遇到频繁操作state的情况,如果一直更新storage,性能太差

实现代码

最后代码如下:

tool.js:

/*
持久化相关内容
*/
// 重写的Array方法
const funcArr = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
const typeArr = ['object', 'array']

function setCallBack(obj, key, options) {
 if (options && options.set) {
  if (getType(options.set) !== 'function') throw ('options.set需为function')
  options.set(obj, key)
 }
}

function rewriteArrFunc(arr, options) {
 if (getType(arr) !== 'array') throw ('参数需为array')
 funcArr.forEach(key => {
  arr[key] = function(...args) {
   this.__proto__[key].call(this, ...args)
   setCallBack(this[Symbol.for('parent')], this[Symbol.for('key')], options)
  }
 })
}

function dep(obj, key, options) {
 let data = obj[key]
 if (typeArr.includes(getType(data))) {
  data[Symbol.for('parent')] = obj
  data[Symbol.for('key')] = key
 }
 Object.defineProperty(obj, key, {
  configurable: true,
  get() {
   if (options && options.get) {
    options.get(obj, key)
   }
   return data
  },
  set(val) {
   if (val === data) return
   data = val
   let index = typeArr.indexOf(getType(data))
   if (index >= 0) {
    data[Symbol.for('parent')] = obj
    data[Symbol.for('key')] = key
    if (index) {
     rewriteArrFunc(data, options)
    } else {
     observer(data, options)
    }
   }
   setCallBack(obj, key, options)
  }
 })
}

function observer(obj, options) {
 if (getType(obj) !== 'object') throw ('参数需为object')
 let index
 Object.keys(obj).forEach(key => {
  dep(obj, key, options)
  index = typeArr.indexOf(getType(obj[key]))
  if (index < 0) return
  if (index) {
   rewriteArrFunc(obj[key], options)
  } else {
   observer(obj[key], options)
  }
 })
}
function debounceStorage(state, fn, delay) {
 if(getType(fn) !== 'function') return null
 let updateItems = new Set()
 let timer = null
 return function setToStorage(obj, key) {
  let changeKey = getStoragePath(obj, key)[0]
  updateItems.add(changeKey)
  clearTimeout(timer)
  timer = setTimeout(() => {
   try {
    updateItems.forEach(key => {
     fn.call(this, key, state[key])
    })
    updateItems.clear()
   } catch (e) {
    console.error(`persistent.js中state内容持久化失败,错误位于[${changeKey}]参数中的[${key}]项`)
   }
  }, delay)
 }
}
export function getStoragePath(obj, key) {
 let storagePath = [key]
 while (obj) {
  if (obj[Symbol.for('key')]) {
   key = obj[Symbol.for('key')]
   storagePath.unshift(key)
  }
  obj = obj[Symbol.for('parent')]
 }
 return storagePath
}
export function persistedState({state, setItem, getItem, setDelay=0, getDelay=0}) {
 observer(state, {
  set: debounceStorage(state, setItem, setDelay),
  get: debounceStorage(state, getItem, getDelay)
 })
}
/*
vuex自动配置mutation相关方法
*/
export function setMutations(stateReplace, mutationsReplace) {
 Object.keys(stateReplace).forEach(key => {
  let name = key.replace(/\w/, (first) => `update${first.toUpperCase()}`)
  let replaceState = (key, state, payload) => {
   state[key] = payload
  }
  mutationsReplace[name] = (state, payload) => {
   replaceState(key, state, payload)
  }
 })
}
/*
通用方法
*/
export function getType(para) {
 return Object.prototype.toString.call(para)
  .replace(/\[object (.+?)\]/, '$1').toLowerCase()
}

persistent.js中调用:

import {persistedState} from '../common/tools.js'
...
...
// 因为是uni-app小程序,持久化是调用uni.setStorageSync,网页就用localStorage.setItem
persistedState({state, setItem: uni.setStorageSync, setDelay: 1000})

源码地址

https://github.com/goblin-pitcher/uniapp-miniprogram

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

Javascript 相关文章推荐
JQuery中使用ajax传输超大数据的解决方法
Jul 14 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 #Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 #Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 #Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 #Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
Sep 11 #Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
Sep 10 #Javascript
You might like
浅谈json_encode用法
2015/03/05 PHP
php对象工厂类完整示例
2018/08/09 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
2016/05/13 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
bootstrapValidator.min.js表单验证插件
2017/02/09 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
详解mpvue开发小程序小总结
2018/07/25 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
pandas的排序和排名的具体使用
2019/07/31 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python绘制封闭多边形教程
2020/02/18 Python
pymysql 插入数据 转义处理方式
2020/03/02 Python
pytorch实现查看当前学习率
2020/06/24 Python
python爬虫构建代理ip池抓取数据库的示例代码
2020/09/22 Python
波兰购物网站:MALL.PL
2019/05/01 全球购物
2014年维稳工作总结
2014/11/18 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
MySQL中IO问题的深入分析与优化
2022/04/02 MySQL