No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Actions

9/19
Recursos

Aportes 6

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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>

Este curso me ha hecho entender mucho mejor la forma en que se mueve información dentro de vue, estoy impresionado.😸

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.

Que maldita chulada

sería bueno que le cambiaran el nombre cuando pasa de action a mutations, pues se da para confuciones