如何实现一个简易版的vuex持久化工具-创新互联
背景

最近用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)
}
})
} 文章题目:如何实现一个简易版的vuex持久化工具-创新互联
新闻来源:http://www.jxjierui.cn/article/ppoji.html


咨询
建站咨询
