12 2Bvuejs

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

12 2Bvuejs

Introducción

En este tutorial vamos a  seguir trabajando esta increible herramienta que nos da vue llamada vuex y lo que vamos a hacer es agregar algunos elementos extras,vamos a simplificar la forma en la que se mandan a llamar esos valores y por ultimo usaremos una propiedad de vuex llamada mapstate.

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="$store.commit('suma')" >+</button>
<h2> numero {{numero}} </h2>
<h2> edad {{edad}} </h2>
<hijo></hijo>
</div>
`,computed: {
...Vuex.mapState(['edad','numero'])
/*
numero(){
return store.state.numero;
},
edad(){
return store.state.edad;
}
*/
},
});
// HIJO
Vue.component('hijo',{
template: //html
`
<div class="p-5 bg-success text-white">
<button @click="$store.commit('suma')" >+</button>
<h2> numero {{numero}} </h2>
</div>
`,
computed: {
...Vuex.mapState(['edad','numero'])
/*
numero(){
return store.state.numero;
},
edad(){
return store.state.edad;
}
*/
}
});
const store=new Vuex.Store({
state:{
numero:5,
edad:9
},
mutations:{
suma(state){
state.numero++;
}
}
});
const con=new Vue({
el:"#elemento",
store:store
});
</script>
</html>

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

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. :)