【发布时间】：2021-03-29 13:19:35
【问题描述】：
我正在使用 VueX 学习 Vue，并且正在制作小型应用程序。 那个小应用程序调用一个 json 数据并将其打印在模板中。 我创建了一个名为 year() 的突变，该突变获得了一个字符串世界并返回结果，但是当我在模板 {{ year(item.fechaInicio) }} 中使用该突变时，返回一个空值。
这是我的html代码：
<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
<!-- bootstrap 4 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<!-- fontawesome css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" type="text/css">
<!-- Tipografía -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i|Roboto+Mono:100,100i,300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">
<!-- Jquery -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- cookies jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.1/js.cookie.min.js"></script>
<!-- Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Vuex -->
<script src="https://unpkg.com/vuex@3.6.0/dist/vuex.js"></script>
<!-- CSS estilos -->
<link href="calendario-2020.css" rel="stylesheet" />
</head>
<body>
<div class="Calendario" id="caja-vue">
<p class="calendario-titulo">Calendario Académico</p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a aria-controls="home" aria-selected="true" class="nav-link active" data-toggle="tab" href="#home" id="home-tab" role="tab">Estudiantes</a></li>
</ul>
<!--TAB 1 ESTUDIANTES-->
<div class="tab-content" id="myTabContent">
<div aria-labelledby="home-tab" class="tab-pane fade show active" id="home" role="tabpanel">
<!--Semestres-->
<div class="flex-container">
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck1" type="checkbox" /> <label class="custom-control-label" for="customCheck1">Semestre <span class="num">1</span></label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck2" type="checkbox" /> <label class="custom-control-label" for="customCheck2">Semestre <span class="num">2</span></label></div>
<p>Agosto 15-2020<br />
Diciembre 20-2020
</p>
</div>
<div class="Semestre">
<div class="custom-control form-control-lg custom-checkbox"><input class="custom-control-input" id="customCheck3" type="checkbox" /> <label class="custom-control-label" for="customCheck3">Intersemestral</label></div>
<p>Enero 17-2020<br />
Mayo 15-2020
</p>
</div>
<div class="col-lg-12 fechas">
<div class="row">
<div class="col-lg-9"> </div>
<div class="col-lg-3">
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Organizar por:</option>
<option>Fecha Inicio</option>
<option>Fecha Final</option>
</select>
</div>
</div>
</div>
</div>
</div>
<!--Formulario de Busqueda-->
<div class="Formulario_calndario">
<div class="row">
<div class="col-lg-4">
<div class="form Formulario_busqueda">
<div class="input-group espacio">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="¿Qué estás buscando?" type="text" />
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Pregrado</option>
<option>Posgrado</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Categoria</option>
<option>Cierre académico</option>
<option>Comité de idiomas</option>
<option>Exámenes finales</option>
<option>Homologaciones, reconocimientos y validaciones</option>
<option>Inicio y finalización de clases</option>
<option>Otras actividades de la vida universitaria</option>
<option>Pago de matrículas</option>
<option>Proceso de inducción</option>
<option>Publicación de grupos cancelados</option>
<option>Recesos y vacaciones</option>
<option>Registro de asignaturas</option>
<option>Reporte de notas</option>
<option>Reserva de cupo, re activaciones de cupo y reintegros</option>
<option>Retiro de asignaturas</option>
</select>
</div>
<div class="form-group">
<select class="form-control" id="exampleFormControlSelect1">
<option disabled="disabled" selected="selected">Tipo de programa</option>
<option>Escuela de Administración</option>
<option>Escuela de Medicina y Ciencias de la Salud</option>
<option>Escuela de Ciencias Humanas</option>
<option>Facultad de Economía</option>
<option>Facultad de Jurisprudencia</option>
<option>Facultad de Estudios Internacionales, Políticos y Urbanos</option>
<option>Facultad de Ciencias Naturales</option>
<option>Facultad de Creación</option>
<option>Escuela de Ingeniería, Ciencia y Tecnologí</option>
</select>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="fas fa-search">
<!--icono-->
</i>
</button>
</div>
<input class="form-control" name="search" placeholder="Programa" type="text" />
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample1" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample1" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body"><input class="form-control" id="example-date-input" type="date" value="2011-08-19" /></div>
</div>
</div>
</div>
<div class="form-group">
<p><a aria-controls="multiCollapseExample2" aria-expanded="false" class="Fecha" data-toggle="collapse" href="#multiCollapseExample2" role="button">Seleccione un mes</a></p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
<p>Fecha inicial</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
<p>Fecha final</p>
<input class="form-control" id="example-date-input" type="date" value="2011-08-19" />
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<input class="btn btn-primary" type="submit">Buscar</input>
</div>
<div class="col-md-6">
<input class="btn btn-primary Limpiar" type="submit">Limpiar</input>
</div>
</div>
</div>
</div>
</div>
<actividades></actividades>
</div>
</div>
</div>
</div>
</div>
<script src="codigo.js"></script>
</body>
</html>
这是我的 javascript 代码：
//componentes
Vue.component('actividades', {
template: /*html*/
`
<div class="col-lg-8">
<template v-for="item of actividades">
<div class="row Programa-especifico">
<div class="col-md-4 col-lg-4 Fecha">
<div class="row">
<div class="col-md-2 col-lg-2">
<i class="far fa-calendar">
<!--icono-->
</i>
</div>
<div class="col-md-10 col-lg-10 px-5"><strong class="titulo">Marzo 08</strong> <span>Abril 17 2020</span></div>
</div>
<div class="mt-3 txt">
<strong>Tipo de programa</strong> <span>{{ item.tipoPrograma }}</span><br />
<strong>Facultad</strong> <span>{{ item.facultad }}</span><br />
<strong>Programa</strong> <span>{{ item.programa }}</span><br />
<strong>Categoria</strong> <span>{{ item.categoria }}</span>
</div>
</div>
<div class="col-md-8 col-lg-8 Descripcion">
<p class="titulo">{{ item.contenido }}</p>
<!--
<p class="txt">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
-->
<!--
<i class="fas fa-map-marker-alt">
</i>
-->
<!--
<strong>Lugar:</strong> <span class="txt">Universidad del Rosario, Sede, Claustro, Aula Mutis</span><br />
<i class="far fa-calendar">
</i>
-->
<strong>Fecha de inicio:</strong> <span class="txt">
Marzo, de {{ year(item.fechaInicio) }}
</span><br />
<strong>Fecha de cierre:</strong> <span class="txt">12 Marzo, de 2020</span><br />
<!--
<i class="far fa-clock">
</i>
<strong>Hora:</strong> <span class="txt">De 8:00 a.m. a 12:30 p.m</span>
-->
<div class="row">
<div class="col-lg-3 Semestre_uno"><a href="">{{ item.periodo }}</a></div>
<div class="col-lg-3 Cerrado"><a href="">Cerrado</a></div>
</div>
</div>
</div>
</template>
</div>
`,
computed: {
...Vuex.mapState(['actividades','programas']),
},
methods: {
...Vuex.mapActions(['llamarJson']),
...Vuex.mapMutations(['year'])
}
});
//VueEx
const store = new Vuex.Store({
state: {
actividades: [],
programas: []
},
mutations: {
llamarJsonMutation(state, llamarJsonAction){
state.actividades = llamarJsonAction.Nueva_estructura_proveedor;
state.programas = llamarJsonAction.BD_programas;
},
year(date){
return String(date).substr(8, 2);
}
},
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');
}
});
【问题讨论】：
-
您的突变不应该返回任何数据，它会改变存储中的数据，并且您的 getter 应该检索该数据。因此，您的变更应该定义或修改存储中的值，然后创建一个 getter 来检索存储中的数据。
标签： javascript vue.js vuex