如何使用 Vue 在 Vue 中创建一个通用函数？

Question

我想制作一个通用函数以在内部突变和方法中使用。该函数接收一个参数，然后 return 一个布尔值，例如：

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";
            }
        }
    }

我尝试创建一个突变，然后在另一个带有 commit 的突变中使用它，但是 estadoFunction(date) return未定义，另一方面 console.log("true") 和 console.log("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.log("true");
                return true;
            }else{
               console.log("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');
    }
});

Answer 1

突变不应该调用其他突变（动作可以调用多个突变）并且您不应该对 mutations/actions 中的 return 值感兴趣。

如果您使用像 Vue CLI 这样的捆绑器，最好为其创建一个单独的模块（例如 Utilities.js）并将其导入商店和任何组件。

由于您使用的是 CDN，因此您可以在 Vue 代码上方定义 estadoFunction。例如：

estadoFunction(date){
...
}

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

并直接在任何地方使用它。例如，在您的 estado 方法中：

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

如何使用 Vue 在 Vue 中创建一个通用函数？

how to create a universal function in Vue with Vue?

javascript

vue.js

vue-component

vuex

vuejs2