Contenido del curso
Ameth Ordoñez Erazo
Francisco Hernandez
Contenido del curso
Ameth Ordoñez Erazo
Francisco Hernandez
Diego Reyes
Anderson Eduardo Arévalo Ramírez
Manuel Diaz
Hanier Morales
Julian David Alzate Cuervo
Manuel Diaz
Diana Martinez
Jose Alejandro Pantoja Giraldo
Jose Ever Muñoz Muñoz
Yo hice una pequeña prueba con una fake API que me genera nombres de usuarios aleatorios:
Puedemos usarl async/await en los actions, pues son asincronos y podemos manejar promesas: Así quedaria el actions en el store:
mutations: { updateUsername(state, newUsername) { state.username = newUsername; }, }, actions: { async obtenerUsername({ commit }) { const res = await fetch(`https://api.generadordni.es/v2/person/username`); const data = await res.json(); //Un numero aleatorio del 0 al 9 const n = Math.floor(Math.random() * (9 - 0 + 1) + 0); console.log(data); commit("updateUsername", data[n]); }, },
Luego en el ProfileView.vue agregue un botón que me llama al actions con un dispatch
<button @click="obtenerUser">Generar user</button>
Y este es el código del script en el mismo archivo (lo hice con composition API)
<script setup> import { computed } from "vue"; import { useStore } from "vuex"; const store = useStore(); const username = computed(() => store.state.username); const actualizar = (value) => store.commit("updateUsername", value); const obtenerUser = () => store.dispatch("obtenerUsername"); </script>
Genial!
Este curso me ha hecho entender mucho mejor la forma en que se mueve información dentro de vue, estoy impresionado.😸
Es magico <3
export default createStore({ state() { return { dataImages:[] } }, getters: { dataImages(state) { return state.dataImages } }, mutations: { LlenarItems(state, data){ state.dataImages = data; } }, actions: { cargarImagenes: async function({commit}) { try { const setting = { method: 'GET', } const url = 'https://picsum.photos/v2/list?page=2&limit=10'; const data = await fetch(url, setting); const jsonData = await data.json(); commit('LlenarItems',jsonData) }catch (error) { console.log("Ocurrio un error",error); } } } })
Las Actions son una especie de extensión o de una posibilidad adicional frente a las Mutations. Podemos agregar código asíncrono.
Los actions son métodos que realizan mutaciones, generalmente son usados para ejecutar operaciones asíncronas, de tal manera que cuando los datos llegan desde el API, el action se encarga de llamar a una mutación para que este cambie o actualice el state .
trabajando el script de esa manera como podria utilizar estos metodos mapActions, mapGetters, mapState.
ya que no eh podido solucionarlo
Esos métodos están pensados específicamente para Options API, cómo script setup es Composition API, lo más indicado sería que utilices la sintaxis con esta API.
Puedes encontrarlo en la documentación, aquí: https://vuex.vuejs.org/guide/composition-api.html
Que maldita chulada
sería bueno que le cambiaran el nombre cuando pasa de action a mutations, pues se da para confuciones