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?