vue3的响应式对象监听-给对象加缓存Storage

凤凰涅檠

已于 2022-03-03 14:14:16 修改

阅读量1.4k

点赞数

分类专栏： vue3 文章标签： vue.js typescript

于 2022-03-02 14:09:36 首次发布

本文链接：https://blog.csdn.net/ch_weni/article/details/123228897

版权

本文介绍了如何在Vue3中实现响应式对象的监听，并结合Storage进行缓存，提供了一段WatchService的示例代码，旨在帮助开发者理解和应用此类技术。

摘要由CSDN通过智能技术生成

分享一段简单的响应式对象监听代码带缓存Storage，可供大家参考与反思

WatchService

import { Cache } from "@/utils/tools/cache";
import { reactive, watch } from "vue";

class WatchService {
    constructor() {
        // this.obj = this.caches.userInfo.isEmpty ? { id: undefined, name: undefined } : this.caches.userInfo.json;
    }

    /**
     * 创建缓存对象Storage
     */
    caches = {
        userName: new Cache('userName'),
        userInfo: new Cache('userInfo')
    }

    /**
     * 响应式对象用于watch（可从缓存读取）
     */
    obj = reactive({
        userName: this.caches.userName.value,
        userInfo: this.caches.userInfo.isEmpty ? { id: undefined, name: undefined } : this.caches.userInfo.json
    })

    /**
     * 注册事件watch（可缓存监听对象）
     */
    events = {
        userName: (callback?) => this.setWatch('userName', callback),
        userInfo: (callback?) => this.setWatch(&#