Vue with Vue에서 유니버설 함수를 만드는 방법

Vue with 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;
            }
        }

예를 들어 다음과 같은 메서드와 돌연변이에 estado Function(날짜)을 사용하고 싶습니다.

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

변환을 생성하여 커밋을 사용하여 다른 변환 내에서 사용하려고 했지만 estadoFunction(날짜) 반환이 정의되어 있지 않습니다.다른 한 손의 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;
            }
        }
    }

도와주실 수 있나요? 이게 제 완전한 자바스크립트 코드입니다.

//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 CLI와 같은 번들을 사용하는 경우 해당 번들러에 대해 별도의 모듈(예: Utilities.js)을 생성하여 스토어 및 모든 컴포넌트로 Import하는 것이 가장 좋습니다.

CDN을 사용하고 있기 때문에,estadoFunctionVue 코드 위에 있습니다.예를 들어 다음과 같습니다.

estadoFunction(date){
...
}

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

어디서든 직접 사용할 수 있습니다.예를 들면,estado방법:

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

언급URL : https://stackoverflow.com/questions/65417556/how-to-create-a-universal-function-in-vue-with-vue