11 2Bvuejs

11.-Vue js 2 tutorial español ? [Vuex]??

11 2Bvuejs

Introducción

En este video vamos a trabajar con vuex así como lo hemos prometido en los tutoriales anteriores pues ha llegado el momento, pero para los que no sepan aun que es vuex, vuex es una librería de vue que nos ayuda a almacenar datos para que puedan ser accedidos desde cualquiera de nuestros componentes.

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 {{$store.state.numero}} </h2>
<hijo></hijo>
</div>
`
});
// HIJO
Vue.component('hijo',{
template: //html
`
<div class="p-5 bg-success text-white">
<button @click="$store.commit('suma')" >+</button>
<h2> numero {{$store.state.numero}} </h2>
</div>
`
});
const store=new Vuex.Store({
state:{
numero:5
},
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/WByggE

Video

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *