Actions

Clase 9 de 19 • Curso de Vue.js: Manejo del Estado con Vuex

Ameth Ordoñez Erazo

student•

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>

Francisco Hernandez

student•

Genial!

Actions

Introducción

¿Qué es VUEX y para qué sirve?

Manejo de estado

Patrón FLUX

Conceptos básicos

Instalación y boilerplate de Vuex

Estado simple con Options API

State

Getters

Mutations

Actions

Organización de código

Helpers

Modules

Espacios de nombres

Modelo de datos

Caso de uso: ChatApp con Vuex

Normalización

Canales

Mensajes

Canales y Mensajes

Contactos

Cierre del curso

Despedida