Javascript 如何使用Vue在Vue中创建通用函数?

Javascript 如何使用Vue在Vue中创建通用函数?,javascript,vue.js,vuejs2,vue-component,vuex,Javascript,Vue.js,Vuejs2,Vue Component,Vuex,我想制作一个通用函数,用于内部突变和方法。 该函数接收一个参数,然后返回一个布尔值,例如: estadoFunction(date){ var dateObj = new Date(); var month = dateObj.getUTCMonth() + 1; //months from 1-12 var day = dateObj.getUTCDate(); var year = dateObj

我想制作一个通用函数,用于内部突变和方法。 该函数接收一个参数,然后返回一个布尔值,例如:

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;
            }
        }
methods: {
        estado(date){
            if(this.estadoFunction(date)){
                return "Abierto";
            }else{
                return "Cerrado";
            }
        }
    }
我想在方法和变体中使用estadoFunction(date),例如:

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;
            }
        }
methods: {
        estado(date){
            if(this.estadoFunction(date)){
                return "Abierto";
            }else{
                return "Cerrado";
            }
        }
    }
我尝试创建一个变种,然后在另一个变种中使用它,但在另一方面,console.log(“true”)和console.log(“false”)起作用,estadoFunction(date)返回未定义

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');
    }
});
//组件
Vue.组件(‘活动’{
模板:/*html*/
` 
  • {{estado(item.fechaFin)}
    • `, 计算:{ …Vuex.mapState(['actividades','programas']), }, 方法:{ 埃斯塔多(日期){ if(此.estado函数(日期)){ 返回“Abierto”; }否则{ 返回“塞拉多”; } } } }); //VueEx const store=新的Vuex.store({ 声明:{ actividadesPrimerFiltro:[], 活动:[], 方案:[] }, 突变:{ LlamarJsonmutate(州,llamarJsonAction){ state.programas=llamarJsonAction.BD_programas; //过滤cerrados和abiertos事件 llamarJsonAction.Nueva\u estrastructa\u proveedor.forEach(项=>{ if(this.commit(“estadoFunction”,item.fechaFin)){ state.actividadesPrimerFiltro.push(项目); } }); state.actividades=state.actividadesPrimerFiltro.sort((a,b)=>parseFloat(a.fechaInicio)-parseFloat(b.fechaInicio)); }, estadoFunction(日期){ var dateObj=新日期(); var month=dateObj.getUTCMonth()+1;//从1到12个月 var day=dateObj.getUTCDate(); var year=dateObj.getUTCFullYear(); var fechaActual=新日期(年+月+日); var fechaInicioEvento=新日期(日期); 如果(fechaInicioEvento>fechaActual){ 返回true; }否则{ 返回false; } } }, 行动:{ llamarJson:异步函数({commit}){ const data=wait fetch('calendario-2021-prueba.json'); const dataJson=wait data.json(); 提交('llamarjsonmutate',dataJson); } } }); //Vue 新Vue({ el:“#caja vue”, 店:店,, 创建(){ 这是.store.dispatch('llamarJson'); } });
突变不应该调用其他突变(操作可以调用多个突变),您也不应该对突变/操作的返回值感兴趣

如果您使用的是Vue CLI之类的绑定器,最好为其创建一个单独的模块(如Utilities.js),并将其导入存储和任何组件

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

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;
            }
        }
methods: {
        estado(date){
            if(this.estadoFunction(date)){
                return "Abierto";
            }else{
                return "Cerrado";
            }
        }
    }
estado函数(日期){
...
}
/*****应用程序从这里开始*****/
//成分
Vue.组件(‘活动’{
...
}
并在任何地方直接使用。例如,在您的
estado
方法中:

方法:{
埃斯塔多(日期){
if(estadoFunction(日期)){
返回“Abierto”;
}否则{
返回“塞拉多”;
}
}
}