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
Introducción
Desarrollo de Aplicaciones Profesionales con VueJS
VueJS: Creación y Desarrollo de Aplicaciones Web Progresivas
CLI y Dev Tools
Herramientas esenciales para desarrollar con BioJS y NodeJS
Creación de una Aplicación Vue.js con CLI y Webpack Simple
Configuración y uso de Webpack en proyectos JavaScript
Configuración y uso de Babel para compatibilidad JavaScript
Configuración de eSlimt con EstándarJS y Webpack
Integración de SaaS y Bulma en Aplicaciones Vue.js
Configuración de Pag para optimizar el workflow de desarrollo HTML
Diseño de Mockups: Práctica y Colaboración en Comunidad
Creación de Vistas con Mockups y Vue.js
Manipulación del DOM
Expresiones en Vue: Manipulación Dinámica del DOM
Directivas de Vue: Uso y Funciones Principales
Data Binding y Directivas en Vue: bmodel y bevined
Propiedades Computadas en JavaScript: Creación y Uso Práctico
Uso de Watchers en Biomóvil para Gestión de Cambios de Propiedades
Manipulación de Eventos y Métodos en Aplicaciones Web
Creación de Interfaz con Vue.js y Framework CSS Bulma
Manipulación del DOM con Vue.js: Práctica y Ejercicios
REST y HTTP
Integración de Servicios HTTP con JavaScript y API Fetch
Uso de la librería Trae para peticiones HTTP con Fetch API en JavaScript
Integración de Servicios en Vue.js: Uso de API y Mejora de Código
Sistema de Componentes
Creación y Registro de Componentes en Vue.js
Creación de Componentes en Vue.js con Bulma para Platzi Music
Reactividad y Virtual DOM en Vue.js: Conceptos y Soluciones
Ciclo de Vida de Componentes en Vue.js: Hooks y Ejecución de Código
Comunicación entre Componentes en Vue.js: Props y Eventos
Comunicación entre Componentes en Vue: Eventos de Hijo a Padre
Uso de Slots para Inyección Dinámica de HTML en Componentes Vue
Comunicación entre Componentes Vue con Event Bus y Plugins
Vue Router
Vue Router: Creación de Single Page Applications
Instalación y Configuración de Vue Router en Aplicaciones Vue.js
Navegación de Rutas con Vue Router en Aplicaciones SPA
Extendiendo VueJS
Uso de Modifiers en VueJS para Mejorar Funcionalidad de Eventos
Filtros en Vue: Formateo de Duraciones de Canciones en Componentes
Creación de Directivas Personalizadas en Vue.js
Reutilización de Funcionalidad con Mixins en VueJS
Clases, Animaciones y Transiciones36
Integración de Animaciones CSS3 en Aplicaciones VueJS
Vuex
Gestión de Estados Centralizados con la Librería BuX
Integración de VueX y arquitectura Flux en Vue.js
Mutaciones en Vuex: Gestión y Actualización del Estado Reactivo
Uso de Getters en Vuex para Acceso Personalizado de Estado
Acciones asincrónicas en Vuex: cómo implementarlas y utilizarlas
Integración de VueX y Babel en PlatziMusic
Nuxt.js
Renderizado del Lado del Servidor con Vue.js y Nuxt
Creación de Proyectos con Nact.js en Vue para Server-Side Rendering
Integración de VueJS con Nuxt para Server-Side Rendering
Deploy a Producción con Now
Despliegue de Aplicaciones con NOW en BIOS JS
Despliegue de Aplicaciones Node.js con NOW y Webpack
Conclusiones
Construcción de Aplicaciones Profesionales con Vue.js
Bonus
Internacionalización de Aplicaciones con Vue I18n
Pruebas Unitarias con Vue.js y Webpack: Configuración y Ejecución
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
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.
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.
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
.
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.
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.
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.
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
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:
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?