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

2020-06-14 06:13:39易采站长站整理

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