时间戳

首页 > 解决方案 > 如何使 Vue 3 插件属性具有反应性？

javascript - 如何使 Vue 3 插件属性具有反应性？

问题描述

我是制作 Vue3 应用程序的新手。无论它在做什么，我都希望它具有日志记录功能。所以我想制作简单的记录器并提供“日志”功能以在我的应用程序中使用。

所以我在logger.js中写了

class Logger {
    constructor() {
        this.page_num = 20;
        this.logs = this.paginate();
    }

    paginate() {
        let values = [],
        keys = Object.keys(localStorage).slice(0, this.page_num),
        i = keys.length;

        while(i--) {
            values.push(
                {
                    time: keys[i],
                    value: localStorage.getItem(keys[i]),
                });
        }

        return values;
    }
    
    log(string) {
        let key = (new Date()).toLocaleString("ru-Ru", {timeZone: "Europe/Moscow"});
        localStorage.setItem(key, string);

        this.logs = this.paginate();
        console.log(localStorage);
    }
}

export default {
    install: (app, options) => {
        app.config.globalProperties.$logger = new Logger();
    }
}

然后我在app.js中像这样使用它

const myApp = createApp(App)
myApp.use(LoggerPlugin);
myApp.mount('#app')

问题是我希望它在App.vue中具有反应性。并且 $logger.logs （显示 logger 生成的所有日志）不是响应式的，它只加载一次，并且当我尝试在应用程序中显示日志时不会对任何新日志做出反应。

<log-entries-container :logs="$logger.logs"></log-entries-container>

我可以在 Vue 插件中以某种方式使属性日志具有反应性吗？

标签： javascriptvue.jsvuejs3

解决方案

推荐阅读