Creating a logging system for my Javascript Project using VueJS and Vuex
To make logging methods accessible to all components, I am utilizing a global Mixin :
import { mapState, mapActions } from 'vuex'
import LogLevel from '@/enums/logger/LogLevel'
export default {
computed: {
...mapState('Logger', {
global_logs: 'activities'
})
},
methods: {
...mapActions('Logger', {
clear_logs: 'clear_activities'
}),
log_handler(message, data = {}, options = {}) {
this.$store.dispatch('Logger/add_activity', {
message: message,
payload: data,
...options,
});
},
log(message, data = {}, options = {}) {
options.level = options.level ? options.level : LogLevel.INFO;
this.log_handler(message, data, options);
},
log_debug(message, data = {}, options = {}) {
options.level = LogLevel.DEBUG;
this.log_handler(message, data, options);
},
log_info(message, data = {}, options = {}) {
options.level = LogLevel.INFO;
this.log_handler(message, data, options);
},
log_error(message, data = {}, options = {}) {
options.level = LogLevel.ERROR;
this.log_handler(message, data, options);
},
log_warning(message, data = {}, options = {}) {
options.level = LogLevel.WARNING;
this.log_handler(message, data, options);
},
log_success(message, data = {}, options = {}) {
options.level = LogLevel.SUCCESS;
this.log_handler(message, data, options);
}
}
}
And here is the enumeration utilized :
export const LogLevel = Object.freeze({
DEBUG: "secondary",
INFO: "info",
WARNING: "warning",
ERROR: "danger",
SUCCESS: "success"
});
I am exploring options for dynamically declaring these functions. For instance, creating a method automatically for each $l Level in LogLevel:
log_$l(message, data = {}, options = {}) {
options.level = LogLevel.$l;
this.log_handler(message, data, options);
}
Any suggestions would be appreciated.