如何实现一个简易版的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(ob 在Vue和Vuex的开发中，有时需要对某些状态（state）进行持久化，以便在应用重启或页面刷新后能够恢复之前的状态。本篇文章将探讨如何实现一个简易版的Vuex持久化工具，以应对uni-app小程序项目中无法直接持久化state的问题。 ### 初步思路 1. **Vue的Watcher模式**：我们可以利用Vue的响应式系统，通过`Dep`（依赖收集）和`Observer`（数据观察者）来监听和劫持需要持久化的state。当state的数据发生变化时，触发持久化操作。 ```javascript 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 new Error('参数需为object'); Object.keys(obj).forEach(key => { dep(obj, key, options); if (getType(obj[key]) === 'object') observer(obj[key], options); }); } ``` ### 问题与解决方案 2. **对象深度持久化**：当数据结构复杂，如`a={b:{c:d:{e:1}}}`时，直接持久化整个对象可能导致效率低下，因为任何子节点的变更都会导致整个对象的持久化。为了解决这个问题，我们需要在检测到变化时找到变动节点的父节点，然后只持久化这个父节点。 3. **添加指向父节点的指针**：在`observer`函数中，为每个对象添加一个指向父节点的指针，使用`Symbol`来避免遍历时被检测到。这样，当子节点变化时，可以通过指针找到根节点并持久化。 ```javascript function dep(obj, key, options) { let data = obj[key]; if (getType(data) === 'object') { data[Symbol.for('parent')] = obj; data[Symbol.for('key')] = key; } // ... } 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; } ``` 4. **数组的持久化问题**：由于数组的原生方法如`push`、`pop`等不会改变引用，Vue的`defineProperty`无法检测到。为了解决这个问题，我们可以覆写这些方法，确保每次操作数组时，都能触发持久化。 ```javascript ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => { Array.prototype[method] = function (...args) { const result = Reflect.apply(Array.prototype[method], this, args); // 重新赋值并持久化 this.length = this.length; // 触发setter return result; }; }); ``` ### 结论 通过以上步骤，我们可以实现一个简易的Vuex持久化工具。它使用Vue的响应式机制来监听state的变化，并通过添加指向父节点的指针来跟踪变化路径，以便在数据变更时只持久化受影响的部分。对于数组，我们还需要特别处理其原生方法，确保所有操作都能触发持久化。这种方法虽然简单，但能有效地减少不必要的持久化操作，提高性能。在实际开发中，可能还需要考虑浏览器兼容性、错误处理和优化等问题，以适应更复杂的应用场景。