13 2Bvuejs

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

13 2Bvuejs

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/[email protected]/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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)