How can I make Vue 3 plugin property reactive?

Viewed 75

I am novice making Vue3 app. Whatever it is doing, I want it to have logging abilities. So I want to make simple logger and provide "log" function to use in my app.

So I wrote in 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();
    }
} 

Then I use it like this in app.js

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

The problem is that I want it reactive in App.vue. And $logger.logs (which shows all logs made by logger) is not reactive, it just loads once and doesn't react on any new logs when I try to show logs in application.

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

Can I make property logs reactive somehow in Vue Plugin?

0 Answers
Related