Динамически генерируемый метод VueJS

Question

Я создаю систему ведения журнала для моего проекта JavaScript с VueJS и Vuex

Чтобы обеспечить доступ к методам ведения журналов для всех моих компонентов, я использую глобальный 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);
        }
    }
}

И использованный перечень:

export const LogLevel = Object.freeze({
    DEBUG: "secondary",
    INFO: "info",
    WARNING: "warning",
    ERROR: "danger",
    SUCCESS: "success"
});

Итак, я хотел бы знать, есть ли способ объявить эти функции динамически. Например, для всех уровней $ l LogLevel я хотел бы автоматически создать метод:

log_$l(message, data = {}, options = {}) {
    options.level = LogLevel.$l;
    this.log_handler(message, data, options);
}

Спасибо

Answer 1

Да, вы можете: https://jsfiddle.net/rhw7uj9L/

const LogLevel = Object.freeze({
    DEBUG: "secondary",
    INFO: "info",
    WARNING: "warning",
    ERROR: "danger",
    SUCCESS: "success"
})

const fns = Object.keys(LogLevel).map(level => {
    return {
        ['log_' + level.toLowerCase()] (message, data = {}, options = {}) {
            options.level = LogLevel[level]
            this.log_handler(message, data, options)
        }
    }
})

const methods = Object.assign(...fns)

new Vue({
  el: "#app",
  data: {},
  methods: {
    log_handler (message, data, options) {
        console.log('logging', message, data, options)
    },
    ...methods
  },
  created () {
    this.log_handler('olas')
    this.log_warning('yess')
    this.log_error('noppp')
  }
})