14 2Bvuejs

14.-Vue js 2 tutorial español ? [Actions,mapActions,mapState,]??

14 2Bvuejs

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/[email protected]/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

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

En Programador Novato vivimos de los anuncios, hemos detectado que está utilizando extensiones para bloquear anuncios. Ayudanos deshabilitando tu bloqueador de anuncios. :)