Как создать универсальную функцию в Vue с помощью Vue?

Я хочу сделать универсальную функцию для использования внутри мутаций и методов. Эта функция получает параметр, а затем возвращает логическое значение, например:

estadoFunction(date){
            var dateObj = new Date();
            var month = dateObj.getUTCMonth() + 1; //months from 1-12
            var day = dateObj.getUTCDate();
            var year = dateObj.getUTCFullYear();
            var fechaActual = new Date(year + "-" + month + "-" + day);
            var fechaInicioEvento = new Date(date);
            if (fechaInicioEvento > fechaActual){
                return true;
            }else{
                return false;
            }
        }

Я хотел бы использовать estadoFunction(date) внутри методов и мутаций, например:

methods: {
        estado(date){
            if (this.estadoFunction(date)){
                return "Abierto";
            }else{
                return "Cerrado";
            }
        }
    }

Я попытался создать мутацию, а затем использовать ее внутри другой мутации с фиксацией, но estadoFunction(date) возвращает undefined, с другой стороны, console.info("true") и console.info("false") работают.

mutations: {
        llamarJsonMutation(state, llamarJsonAction){

            state.programas = llamarJsonAction.BD_programas;

            //filtro por eventos cerrados y abiertos
            llamarJsonAction.Nueva_estructura_proveedor.forEach( item => {
                if (this.commit("estadoFunction", item.fechaFin)){
                    state.actividadesPrimerFiltro.push(item);
                }
            });

            state.actividades = state.actividadesPrimerFiltro.sort((a, b) => parseFloat(a.fechaInicio) - parseFloat(b.fechaInicio));
        },
        estadoFunction(date){
            var dateObj = new Date();
            var month = dateObj.getUTCMonth() + 1; //months from 1-12
            var day = dateObj.getUTCDate();
            var year = dateObj.getUTCFullYear();
            var fechaActual = new Date(year + "-" + month + "-" + day);
            var fechaInicioEvento = new Date(date);
            if (fechaInicioEvento > fechaActual){
                console.info("true");
                return true;
            }else{
               console.info("false");
                return false;
            }
        }
    }

Не могли бы вы мне помочь?, это мой полный код javascript:

//componentes
Vue.component('actividades', {
    template: /*html*/
        ` 
        <div class = "col-lg-8">
            <template v-for = "(item, key) in actividades">
                <ul>
                    <li>{{ estado(item.fechaFin) }}</li>
                <ul>
            </template>
        </div>
        `,
    computed: {
        ...Vuex.mapState(['actividades','programas']),
    },
    methods: {
        estado(date){
            if (this.estadoFunction(date)){
                return "Abierto";
            }else{
                return "Cerrado";
            }
        }
    }
});

//VueEx
const store = new Vuex.Store({
    state: {
        actividadesPrimerFiltro: [],
        actividades: [],
        programas: []
    },
    mutations: {
        llamarJsonMutation(state, llamarJsonAction){

            state.programas = llamarJsonAction.BD_programas;

            //filtro por eventos cerrados y abiertos
            llamarJsonAction.Nueva_estructura_proveedor.forEach( item => {
                if (this.commit("estadoFunction", item.fechaFin)){
                    state.actividadesPrimerFiltro.push(item);
                }
            });

            state.actividades = state.actividadesPrimerFiltro.sort((a, b) => parseFloat(a.fechaInicio) - parseFloat(b.fechaInicio));
        },
        estadoFunction(date){
            var dateObj = new Date();
            var month = dateObj.getUTCMonth() + 1; //months from 1-12
            var day = dateObj.getUTCDate();
            var year = dateObj.getUTCFullYear();
            var fechaActual = new Date(year + "-" + month + "-" + day);
            var fechaInicioEvento = new Date(date);
            if (fechaInicioEvento > fechaActual){
                return true;
            }else{
                return false;
            }
        }
    },
    actions: {
        llamarJson: async function({ commit }){
            const data = await fetch('calendario-2021-prueba.json');
            const dataJson = await data.json();
            commit('llamarJsonMutation', dataJson);
        }
    }
});

//Vue
new Vue({
    el: '#caja-vue',
    store: store,
    created(){
        this.$store.dispatch('llamarJson');
    }
});
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
245
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мутации не должны вызывать другие мутации (действия могут вызывать несколько мутаций), и вас не должны интересовать возвращаемые значения от мутаций/действий.

Если вы использовали сборщик, такой как Vue CLI, было бы лучше создать для него отдельный модуль (например, Utilities.js) и импортировать его в магазин и любой компонент.

Поскольку вы используете CDN, вы можете определить estadoFunction над своим кодом Vue. Например:

estadoFunction(date){
...
}

/***** App begins here *****/
//componentes
Vue.component('actividades', {
...
}

И используйте его где угодно напрямую. Например, в вашем методе estado:

methods: {
  estado(date){
    if (estadoFunction(date)){
        return "Abierto";
    }else{
        return "Cerrado";
    }
  }
}

Другие вопросы по теме