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









Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 📡

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04