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 *

Información básica sobre protección de datos Ver más

  • Responsable: Eugenio Chaparro.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a digitalocean.com que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad