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]))
