13.-Vue js 2 tutorial espa帽ol ? [Vuex, mapState,object spread operator]??

Introducci贸n

En este video vamos a seguir trabajando con mapState de vuex, pero en esta ocasi贸n en lugar de estar trabajando con datos vamos a trabajar con mutaciones (osea las mutaciones que hicimos previamente) y tambi茅n agregaremos nuevas mutaciones.

Codigo

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Vuejs</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div id="elemento" class="container">
<padre></padre>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.1/dist/vuex.js"></script>

<script>
// PADRE
Vue.component('padre',{
template: //html
`
<div class="p-5 bg-dark text-white">
<button @click="suma" >+</button>
<button @click="resta(2)" >-</button>
<h2> numero {{numero}} </h2>
<h2> edad {{edad}} </h2>
<hijo></hijo>
</div>
`,computed: {
...Vuex.mapState(['edad','numero'])
},
methods: {
...Vuex.mapMutations(['suma','resta'])
}
});
// HIJO
Vue.component('hijo',{
template: //html
`
<div class="p-5 bg-success text-white">
<button @click="suma" >+</button>
<button @click="resta(2)" >-</button>
<h2> numero {{numero}} </h2>
</div>
`,
computed: {
...Vuex.mapState(['edad','numero'])
},
methods: {
...Vuex.mapMutations(['suma','resta'])
},
});
const store=new Vuex.Store({
state:{
numero:5,
edad:9
},
mutations:{
suma(state){
state.numero++;
},
resta(state,n){
state.numero=state.numero-n;
}
}
});
const con=new Vue({
el:"#elemento",
store:store
});
</script>
</html>

Codigo en codepen.io: https://codepen.io/programadornovato/pen/arjMEp
Codigo en github.com: https://github.com/programadornovato/vuejs

Video

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

馃煝Editar c贸digo de un m贸dulo en Dolibarr [04]

En este tutorial vamos editar el c贸digo de nuestro m贸dulo personas para poder personalizar algunas…

2 meses hace
馃煝Crear un sub_m贸dulo en Dolibarr [03]

馃煝Crear un sub_m贸dulo en Dolibarr [03]

En este tutorial vamos a crear un sub m贸dulo llamado seguridad que ser谩 muy parecido…

2 meses hace
馃煝Modificar un m贸dulo en Dolibarr [02]

馃煝Modificar un m贸dulo en Dolibarr [02]

En este tutorial aprenderemos a editar el objeto personas del modulo persona que creamos en…

2 meses hace
馃煝Constructor de m贸dulos en Dolibarr

馃煝Constructor de m贸dulos en Dolibarr

Como mencionamos anteriormente Dolibarr es un proyecto realizado sobre la base de una pol铆tica clara:…

2 meses hace
馃煝Tickets en Dolibarr [19]

馃煝Tickets en Dolibarr [19]

Los ticket en dolibarr nos ayudan a comunicar inconveniente en nuestros productos y servicios dentro…

2 meses hace
馃煝Agenda en Dolibarr [18]

馃煝Agenda en Dolibarr [18]

Las agendas en dolibarr nos ayudan a ver las actividades realizadas en proceso y por…

2 meses hace