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”;
}否则{
返回“塞拉多”;
}
}
}