12.-Vue js 2 tutorial espa帽ol 馃憖 [Vuex, mapState,object spread operator]馃憖馃憖



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/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 {{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



Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04