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

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/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="$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>

Video

Eugenio Chaparro

Compartir
Publicado por
Eugenio Chaparro

Entradas recientes

[Solo el ganador sobrevive] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Solo el ganador sobrevive] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial vamos a eliminar todos los demĆ”s jugadores que no ganaron y a…

4 semanas hace
[Seleccionar ganador] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Seleccionar ganador] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial detectaremos cuando se hayan terminado las canicas y mostraremos un ganador. Creamos…

4 semanas hace
[Colocar Marcador] Juego de las Canicas del Juego del Calamar en Roblox Studio

[Colocar Marcador] Juego de las Canicas del Juego del Calamar en Roblox Studio

En este tutorial vamos extraer todos los goles de los jugadores y los vamos a…

4 semanas hace