14.-Vue js 2 tutorial espa帽ol 馃憖 [Actions,mapActions,mapState,]馃憖馃憖


Introducci贸n

En este video vamos a trabajar con las acciones y que es eso de las acciones pues es el 谩rea de vuex que se comunica con el backend y que es eso de comunicarse con el backend, pues es es el 谩rea que se comunica con la base de datos, o cualquier forma con la que queramos obtener informaci贸n.

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-success text-white">
            <button @click="getLengujes" >Carga Lenguajes</button>
            <ul>
                <li v-for="leguaje of leguajes" >{{leguaje.nombre}}</li>
            </ul>
          </div>
          `,
          computed:{
              ...Vuex.mapState(['leguajes'])
          }
          ,
          methods:{
              ...Vuex.mapActions(['getLengujes'])
          }
      });
      const store=new Vuex.Store({
          state:{
            leguajes:[]
          },
          mutations:{
            cargaLenguajes(state,leguajes){
                state.leguajes=leguajes;
            }
          },
          actions:{
            getLengujes: async function({commit}){
                const datos = await fetch("datos.js");
                const leguajes= await datos.json();
                commit('cargaLenguajes',leguajes);
            }
          }
      });
    const con=new Vue({
      el:"#elemento",
      store:store
    });
  </script>
</html>

Codigo en codepen.io: https://codepen.io/programadornovato/pen/VOGwMM
Codigo en github.com : https://github.com/programadornovato/vuejs

Video








Comentarios

Facebook Like

Entri Populer

hackear wifi con kali linux 馃摗

Instalar Netbeans 10 en Windows 10

Instalar netbeans 10 en ubuntu 18.04