Patrón FLUX

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

Clase anteriorSiguiente clase

Hanier Morales

student•

Podemos realizar mutaciones de estado por medio de eventos.

Flux consta de 3 partes fundamentales:

Estado: Datos estructurados que aún no saben cómo preprararse para mostrarse al usuario.
Vista: Luego el estado lo presentamos en la vista, esta se encarga de mostrar el estado de alguna u otra manera. El estado mantiene los datos puros.
Acciones: Son todos los eventos que surgen desde el usuario, el sistema. Éstas se encargan por ejemplo de hacer una llamada a un API. Las acciones pueden ser asíncronas o sincronas.

La mutación no es más que tomar el estado original, y modificarlo.

Uriel Solis Salinas

student•

Patrón FLUX . El manejo de estado en Vuex con Vue.js se basa en el patrón Flux, donde el estado de la aplicación se almacena en un store centralizado (donde se guarda el estado de la aplicación y las lógicas de actualización del estado). Vuex proporciona un flujo unidireccional de datos, lo que significa que la vista no puede modificar directamente el estado de la aplicación, sino que debe enviar una acción al store. . El store de Vuex está compuesto por cuatro elementos principales:

El estado → Donde se almacena el estado de la aplicación.
Las mutaciones → Son las únicas funciones que pueden modificar el estado, y son funciones síncronas que reciben el estado actual y una carga útil (payload) y actualizan el estado en consecuencia.
Las acciones → Son funciones que pueden realizar operaciones asíncronas antes de llamar a una mutación para actualizar el estado.
Los getters → Son funciones que se utilizan para acceder al estado y realizar transformaciones en los datos almacenados en él. .

Vuex también proporciona una forma de modularizar el store, lo que significa que se pueden dividir las características en módulos separados y cada módulo tiene su propio estado, mutaciones, acciones y getters. . El manejo de estado en Vuex con Vue.js facilita el desarrollo de aplicaciones escalables y mantenibles. Al utilizar un store centralizado, se puede evitar la duplicación de datos y garantizar la coherencia del estado en toda la aplicación. Además, el patrón Flux proporciona un flujo unidireccional de datos que hace que el estado sea predecible y fácil de depurar.

WALT 🤖

student•

Redux pero con otro nombre

Jose Ever Muñoz Muñoz

student•

¿que quiere decir cuando dice que los datos son agnosticos?

Patrón FLUX

Hanier Morales

student•

Podemos realizar mutaciones de estado por medio de eventos.

Flux consta de 3 partes fundamentales:

Estado: Datos estructurados que aún no saben cómo preprararse para mostrarse al usuario.
Vista: Luego el estado lo presentamos en la vista, esta se encarga de mostrar el estado de alguna u otra manera. El estado mantiene los datos puros.
Acciones: Son todos los eventos que surgen desde el usuario, el sistema. Éstas se encargan por ejemplo de hacer una llamada a un API. Las acciones pueden ser asíncronas o sincronas.

La mutación no es más que tomar el estado original, y modificarlo.

Uriel Solis Salinas

student•

El estado → Donde se almacena el estado de la aplicación.
Las mutaciones → Son las únicas funciones que pueden modificar el estado, y son funciones síncronas que reciben el estado actual y una carga útil (payload) y actualizan el estado en consecuencia.
Las acciones → Son funciones que pueden realizar operaciones asíncronas antes de llamar a una mutación para actualizar el estado.
Los getters → Son funciones que se utilizan para acceder al estado y realizar transformaciones en los datos almacenados en él. .

WALT 🤖

student•

Redux pero con otro nombre

Jose Ever Muñoz Muñoz

student•

¿que quiere decir cuando dice que los datos son agnosticos?

Patrón FLUX

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