Introducción

1

Desarrollo de Aplicaciones Profesionales con VueJS

2

VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas

CLI y Dev Tools

3

Herramientas esenciales para desarrollar con BioJS y NodeJS

4

Creación de una Aplicación Vue.js con CLI y Webpack Simple

5

Configuración y uso de Webpack en proyectos JavaScript

6

Configuración y uso de Babel para compatibilidad JavaScript

7

Configuración de eSlimt con EstándarJS y Webpack

8

Integración de SaaS y Bulma en Aplicaciones Vue.js

9

Configuración de Pag para optimizar el workflow de desarrollo HTML

10

Diseño de Mockups: Práctica y Colaboración en Comunidad

11

Creación de Vistas con Mockups y Vue.js

Manipulación del DOM

12

Expresiones en Vue: Manipulación Dinámica del DOM

13

Directivas de Vue: Uso y Funciones Principales

14

Data Binding y Directivas en Vue: bmodel y bevined

15

Propiedades Computadas en JavaScript: Creación y Uso Práctico

16

Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades

17

Manipulación de Eventos y Métodos en Aplicaciones Web

18

Creación de Interfaz con Vue.js y Framework CSS Bulma

19

Manipulación del DOM con Vue.js: Práctica y Ejercicios

REST y HTTP

20

Integración de Servicios HTTP con JavaScript y API Fetch

21

Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript

22

Integración de Servicios en Vue.js: Uso de API y Mejora de Código

Sistema de Componentes

23

Creación y Registro de Componentes en Vue.js

24

Creación de Componentes en Vue.js con Bulma para Platzi Music

25

Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones

26

Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código

27

Comunicación entre Componentes en Vue.js: Props y Eventos

28

Comunicación entre Componentes en Vue: Eventos de Hijo a Padre

29

Uso de Slots para Inyección Dinámica de HTML en Componentes Vue

30

Comunicación entre Componentes Vue con Event Bus y Plugins

Vue Router

31

Vue Router: Creación de Single Page Applications

32

Instalación y Configuración de Vue Router en Aplicaciones Vue.js

33

Navegación de Rutas con Vue Router en Aplicaciones SPA

Extendiendo VueJS

34

Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos

35

Filtros en Vue: Formateo de Duraciones de Canciones en Componentes

36

Creación de Directivas Personalizadas en Vue.js

37

Reutilización de Funcionalidad con Mixins en VueJS

Clases, Animaciones y Transiciones36

38

Integración de Animaciones CSS3 en Aplicaciones VueJS

Vuex

39

Gestión de Estados Centralizados con la Librería BuX

40

Integración de VueX y arquitectura Flux en Vue.js

41

Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo

42

Uso de Getters en Vuex para Acceso Personalizado de Estado

43

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

44

Integración de VueX y Babel en PlatziMusic

Nuxt.js

45

Renderizado del Lado del Servidor con Vue.js y Nuxt

46

Creación de Proyectos con Nact.js en Vue para Server-Side Rendering

47

Integración de VueJS con Nuxt para Server-Side Rendering

Deploy a Producción con Now

48

Despliegue de Aplicaciones con NOW en BIOS JS

49

Despliegue de Aplicaciones Node.js con NOW y Webpack

Conclusiones

50

Construcción de Aplicaciones Profesionales con Vue.js

Bonus

51

Internacionalización de Aplicaciones con Vue I18n

52

Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución

53

Autenticación en Vue.js con JSON Web Tokens (JWT)

No tienes acceso a esta clase

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

Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas

43/53
Recursos

¿Qué son las actions en Vuex?

Las actions en Vuex son una solución para manejar operaciones asincrónicas dentro de nuestra aplicación. En Vuex, las mutations deben ser sincrónicas, lo cual limita la capacidad de realizar llamadas asincrónicas como solicitudes HTTP dentro de ellas. Las actions permiten escribir código asincrónico y ejecutar una mutación una vez que ese código ha completado su ejecución.

¿Cómo funcionan las actions?

Las actions son similares a las mutations en cuanto a que terminan utilizando mutaciones. Sin embargo, su principal función es manejar tareas asincrónicas. Al definir una action, se puede simular una llamada asincrónica mediante setTimeout en JavaScript. Este método permite esperar un cierto tiempo antes de ejecutar una función, emulando así el comportamiento asincrónico.

Ejemplo de código de una action

Aquí un ejemplo de cómo se define una action en JavaScript:

actions: {
  incrementAsync({ commit }, payload) {
    setTimeout(() => {
      commit('increment', payload);
    }, 2000); // Simula una demora asincrónica de 2 segundos
  }
}

En este caso, la acción incrementAsync espera 2 segundos antes de ejecutar la mutación increment.

¿Qué rol juega el context y el payload en las actions?

  • Context: Este objeto representa la instancia del store dentro de una acción. Desde el context, se puede acceder a los métodos commit para ejecutar mutaciones y a getters para obtener datos del estado.
  • Payload: Al igual que en las mutaciones, es un objeto que contiene información que podemos enviar a la action.

¿Cómo integrar las actions con los componentes?

Para ejecutar una action desde un componente, utilizamos el método dispatch del store. A continuación, se muestra cómo se haría esto en un método de un componente:

methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync', { number: 2 });
  }
}

Se llama a la acción incrementAsync y se le pasa un objeto payload con el número 2.

¿Cómo manejar el resultado de una action?

Cuando una acción ha terminado su operación asincrónica, a menudo necesitamos realizar alguna tarea adicional. Esto se puede lograr retornando una promesa desde la acción, permitiendo usar .then() en el componente para manejar el resultado.

Ejemplo de uso de promesas con acciones

actions: {
  incrementAsync({ commit }, payload) {
    return new Promise((resolve) => {
      setTimeout(() => {
        commit('increment', payload);
        resolve();
      }, 2000);
    });
  }
}

En el componente, podemos manejar la finalización de la acción así:

methods: {
  incrementAsync() {
    this.$store.dispatch('incrementAsync', { number: 2 })
      .then(() => {
        console.log('Acción terminada');
      });
  }
}

Este método asegura que una vez que la acción haya completado sus tareas, se invoque el callback del .then(), donde se puede implementar cualquier lógica adicional necesaria. Esto es especialmente útil en aplicaciones donde la sincronización con procesos asincrónicos es crucial para una UX fluida.

Practique y mejore

Ahora que comprende cómo funcionan las actions en Vuex, no dude en practicar integrando estas enseñanzas en proyectos reales. Familiarizarse con estos patrones es esencial para dominar el desarrollo con Vue.js y crear aplicaciones fluidas y eficientes. ¡Siga aprendiendo!

Aportes 9

Preguntas 1

Ordenar por:

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

Ok, actions para realizar acciones Asincrónicas y una vez terminadas se despacha la mutación requerida
Para acciones sincronas lo ideal es confirmar la mutación

Los actions son prácticamente mutations asíncronas, y dentro de los actions podemos usar las mismas mutations:D

Actions, son similares a las mutaciones, las diferencias son que:

  • En lugar de mutar el estado, las acciones cometen mutaciones.
  • Las acciones pueden contener operaciones asincrónicas arbitrarias.

Si desde un action lanzamos un commit para a través de la mutación cambiar el estado, como se crea un promise que espera el cambio real del commite.

Tengo el siguiente código funcionando con Firebase (Firestore)

export function login (context, payload) {

  return new Promise((resolve, reject) => {

    //autenticamos al usuario
    firebase.auth().signInWithEmailAndPassword(payload.email, payload.password)
    .then((response) =>
    {
      
      //seleccionamos los valores del usuario en firestore
      firestore.collection('users').where('uid','==',response.user.uid).where('active','==',true).get()
      .then((QuerySnapshot) =>
      {
        if(QuerySnapshot.docs.length==1)
        { 

          if (!QuerySnapshot.docs[0].exists) 
          {
            resolve({'error': true, 'msg': 900})
          } 
          else 
          {
            context.commit('UPDATE_PROFILE', QuerySnapshot.docs[0].data())

            resolve({'error': false})
           
          }
        }
        else
        {
          resolve({'error': true, 'msg': 901})
        }
        
      })
      .catch(err => 
      {
        resolve({'error': true, 'msg': 902})
      });
      
    })
    .catch(function(error) {
    
      resolve({'error': true, 'msg': 903})
    });
  })

}

La duda esta en la siguiente línea

context.commit('UPDATE_PROFILE', QuerySnapshot.docs[0].data())

¿como se puede lanzar el resolve cuando se haya actualizado el perfil del usuario en el store?

Gracias

Bueno asi como q expertos no, se necesita practica y experiencia para dominar algo o al menos comprenderlo a profundidad.

gracias platzi y a todos los profesores, por permitirnos nunca parar de aprender. Espero algun dia poder ser un estudiante oficial, mientras tanto… fue un exelente curso

Alguien sabe donde está el material de lectura, dicho al final de la clase?

me parece que hay un error en la lógica cuando se llama la action incrementAsync… esta sumando al count 4 en lugar de 2.

Si quieren revisar el codigo de esta clase pueden hacerlo en este codesandbox