hola qué tal chicos y en esta oportunidad vamos a hablar de un nuevo tema de una librería o mejor dicho un patrón que nos permite administrar estados en nuestra aplicación con bioy y es que es lo que sucede porque necesitamos manejar estados en una aplicación no necesariamente con buried porque este tema también lo tiene angular y también lo tiene raya por lo que es necesario su implementación sobre todo cuando nuestra aplicación es muy grande a qué me refiero cuando es muy grande cuando manejamos muchos componentes pero el detalle es que cuando tenemos más y más componentes esto se va haciendo cada vez un poco más engorroso entonces yo necesito manejar digamos variables de forma global qué significan estas variables de forma global significa que desde cualquier componente que yo tengo en mi aplicación puedo gestionar unos valores y a su vez puedo consumir esos valores justamente para ello existen algunos patrones para administrar estados dentro de una aplicación una de las librerías muy utilizadas del desarrollo web para ello es redux se habrán escuchado hablar de redux es muy utilizado sobre todo en el ecosistema del río pero en este caso como nosotros estamos arrojando con beauty es vamos a utilizar view ex que es netamente de view y que nos permite tener un almacén centralizado para todos los componentes de nuestra aplicación que significa un almacén centralizado información de estados estados que sólo se pueden manejar o mutar de forma predecible que significa de forma predecible de que tengo que hacer ciertas reglas para poder manipular estos valores para poder conocer un poco de views necesitamos ingresar a su página web punto punto org y aquí vamos a entender un poco de esto no quiero reflejar me en este gráfico aquí pueden ustedes ver que tenemos tres componentes tenemos las vistas tenemos las acciones y tenemos los estados acciones que vendrían a ser como los métodos que yo implementó para poder trabajar la vista de mi aplicación el estado vienen a ser los valores globales de los cuales estamos hablando que esto pueden ser manejados a través de acciones desde nuestra vista y como pueden ver el estado viaja de forma directa a cualquier vista de cualquier componente de mi aplicación pero desde la vista para yo poder digamos mutar o hacer algo en los valores de este estado necesito de una acción no la vista solamente hace tal como indica en la teoría un mapeo declarativo de cada uno de los estados no se olviden los estados vienen a ser la información global que yo tengo de mi aplicación y las acciones son las posibles formas de que el estado podría cambiar en respuesta a ciertas entradas del usuario que ya conocemos desde la vista el usuario solo interactúa con la vista aquí tenemos otro gráfico más trabajado para entender un poco cómo funciona esto al momento de iniciarse la aplicación no nosotros vamos a tener estados globales y estos estados se van a declarar por medio de una librería llamada view ex en mi aplicación estos al renderizar se van a poder ver en nuestros componentes como pueden ver desde el estado puede viajar directamente a un componente un componente para poder manipular o gestionar un estado necesita realizar una mutación qué significa esto mutar o cambiar el valor de un estado pero para ello necesito hacer acciones no por eso es que como pueden ver directamente desde un componente de view yo no puedo acceder directamente al estado necesito invocar acciones y estas acciones me va a permitir de alguna forma poder realizar comités o cambios dentro de mi estado desde las acciones yo puedo incluso trabajar con back-end no o con una api res full desde otro lado y esto lo puedo integrar netamente en mi aplicación las mutaciones además pueden ser vistas desde la herramienta de tul que nosotros tenemos el virus del tour integrado como plugin en google chrome para poder ver estos cambios no entonces de esta forma es como beauty es puede manejar los estados de una aplicación ya un poco más grande ahora en qué tipo de aplicación yo puedo utilizar view ex normalmente nuestras esp ast una de las aplicaciones de una sola página si son muy sencillas de hacer no es necesario utilizar view ex porque nos vamos a complicar un poco eso no quiere decir de que no la podemos usar si podemos utilizar view ex pero es recomendable utilizarlo en proyectos un poco más grandes donde tengo muchos componentes que intercambien muchos datos entonces para no estar teniendo ese flujo que a veces se me vuelve complejo porque intercambian mucha información entre componentes lo mejor es crear estados y estos estados se guardan de forma global en mi aplicación y para ello me valgo de una librería view ex que me permite justamente gestionar este patrón y poder trabajar sin ningún problema entonces esto ha sido una breve introducción de qué cosa es views y en la siguiente lección vamos a crear nuestro proyecto para poder entender un poco mejor cómo funciona esto bien entonces lo primero que vamos a hacer para crear nuestro proyecto que trabaje con view ex es ubicarnos en nuestra carpeta donde estamos guardando todos nuestros proyectos en este caso yo estoy dentro de mi escritorio como pueden ver en mi de stop dentro del viii curso de view normalmente ustedes deben tener una carpeta donde están creando todos los proyectos dentro de esta carpeta lo que vamos a hacer es llamar al comando vibe gray y vamos a ponerle el nombre al proyecto yo en este caso le voy a poner view ex ejemplo ok es obvio que ya deben tener instalado view clic entonces de esta forma vamos a crear nuestro proyecto utilizando la interfaz en modo texto en modo consola sin ningún problema porque de alguna forma lo hace más rápido que la interfaz gráfica o al menos si yo me acostumbrado a trabajar de esta forma bien entonces como pueden ver me dice incluso que hay una versión disponible para actualizar que la 3.8 punto 4 bueno en este caso yo tengo las 3.30 pero no hay ningún problema entonces aquí vamos a seleccionar de forma manual no las características y aquí voy a bajar hasta donde dice view ex voy a presionar la tecla de espacio y para seleccionar en este caso es view ex y nada más y le vamos a dar enter seguidamente me pide el sling para manejar el tema de los errores bueno lo vamos a dejar por defecto finalmente esto también el manejo del link vamos a dejar por defecto el archivo de configuración también por defecto y me dice si quiero guardar este presente para proyectos futuros en este caso le vamos a decir que no vamos a poner la n-ii le vamos a dar en estos momentos weekly va a empezar a instalar bueno va a descargar unas cosas de internet y va a demorar de acuerdo al tipo de conexión que tengas así que regresamos cuando este proceso haya culminado bien entonces ya podemos ver que el asistente ha culminado y ya tenemos instalado nuestro proyecto para trabajar con view ex entonces lo que vamos a hacer es seguir estos dos pasos vamos a ingresar a view ex ejemplo y estoy dentro de la carpeta y lo que vamos a hacer es ejecutar el comando n pm run esperamos hay un momentito que el cliente de view empiece a hacer la compilación building y vamos a esperar hasta que no salga la dirección para ingresar a nuestra aplicación nos dice que nuestra aplicación está corriendo en local juegos en el puerto 80 80 entonces vamos a irnos al navegador y vamos a poner local foros y en este caso vamos a poner 80 80 damos un inter y tenemos nuestra aplicación lista no vamos a irnos entonces aviso el estudio code vamos a abrir ese folder no lo tengo en mi escritorio viajes curso de view ejemplo de view ex vamos a abrir esto bien ya lo tengo abierto vamos a abrir la carpeta de surf y lo que van a poder darse cuenta ustedes es que se ha creado algo nuevo dentro de esta estructura de archivos de un proyecto de view y pueden ver que hay un nuevo archivo que se llama store punto j s no y es justamente en este archivo donde vamos a guardar el almacenamiento de los datos que van a ser utilizados en nuestros componentes bien entonces vamos a empezar a hablar de qué cosas son los estados cuando trabajamos con views sí nosotros recordamos nosotros tenemos componentes dentro de nuestra aplicación tenemos un componente principal que vendría a ser como el componente padre de toda la app y luego tenemos componentes o sus componentes que vendrían a ser como componentes hijos no cada uno de estos componentes guarda su propio estado que es lo que hemos estado viendo hasta el momento en el curso no si ustedes recuerdan cada componente tiene su sección data donde se guarda el modelo que vendría a ser como el estado propio de ese componente entonces cuando lo queremos intercambiar datos entre componentes padres e hijos hemos estado viendo lo que eran los propios y también lo que era la emisión de eventos para ir desde hijos hasta padres si ustedes recuerdan para ir desde padre hasta hijo utilizamos los profes y para ir desde un hijo hasta los padres utilizamos los eventos no hacíamos un emmy si ustedes recuerdan para emitir eventos desde hijos y el padre al escuchar ese evento lo captura y lo maneja en su componente bien entonces esto es lo que conocemos hasta el momento esto es como lo manejamos cuando la aplicación tiene muchos componentes como que se vuelve un poco complejo estar manejando los pros vamos a tener datos por todos lados entonces se nos complica un poco no es difícil hacerlo pero si el mantenimiento es el detalle entonces qué hace views view this lo que hace es tener un repositorio general para toda la aplicación como un estado global y ese store global mejor dicho ese estado global va a ser dirigido a todos los componentes y para eso todos los componentes reciben los nuevos estados ya que al ser un estado global un componente hijo puedo acceder hasta ese estado global de toda la aplicación sea no hubiera ningún problema de estar pasándose entre componentes datos y lo mismo sucede cuando el hijo emitían si ustedes recuerdan para hacia los padres en este caso el hijo lo que podría ser un componente de escala final lo que podría hacer es actualizar un estado en nuestro repositorio de views de esta forma y eso afectaría o actualizaría en todos los demás componentes no olvidemos de que view ex el reactivo y al ser reactivo al cambiarse un estado o cualquier componente que cambie el estado pues va a afectar a todos los demás aquí podemos ver una comparación entre lo que manejamos con la instancia de view con lo que se maneja ahora con la instancia de view ex pueden ver ustedes hay una diferenciación aunque digamos hay algo parecido en vive manejamos por ejemplo el modelo a través de la data en el caso de vivex vamos a manejar los estados que vienen a ser el modelo global de toda la aplicación teníamos los métodos en este caso vamos a tener las opciones para poder manipular esos estados ojo las acciones trabajan en paralelo con las mutaciones esto porque se hace muchos nos preguntamos a veces eso lo que pasa es que aquí los creadores de view ex han pensado de que puede existir una forma de que se cambie un estado de forma incorrecta entonces a través de las mutaciones yo puedo hacer un roll back y regreso al estado original o al estado anterior que tenía esa variable y luego tenemos los gators su propio nombre dice gathers es acceder a un dato de estado que también se puede hacer de forma directa a través del objeto store que se visualiza o se expande en toda la aplicación bien una vez conocido esto vamos a hacer una modificación para entender un poco esto de los estados nos vamos a nuestra aplicación vamos a minimizar esto y ahora si éste lo que teníamos teníamos la aplicación hecha teníamos un componente view y en este componente a view importamos un componente hello world que es lo que se crea creamos un componente en beauty es aquí está el componente hello world y cuando nosotros llamamos al componente le enviamos un mensaje yo le cambia el texto al mensaje le puse view ex desde cero por eso es que ustedes pueden ver que se visualiza view ex desde cero no si acá le cambiamos los ceros actualizamos aquí no ahí se cambia esto bien entonces ahora sí nos vamos al componente hello world van a ver ustedes que tengo aquí esta variable mensaje pero esta variable mensaje la estoy recibiendo desde el componente up entonces debe estar definido en el próximos un poco aquí pueden ver no aquí está el proxy donde se pasa desde el padre al hijo vamos a borrar todo esto no para que no tengamos problemas vamos a borrar todo esto hasta acá esto también y vamos a dejarlo hasta ahí ok grabamos esto y tenemos esto perfecto vamos a cambiar este mensaje pero utilizando en este caso view desde un estado y ustedes van a ver que es muy sencillo nos vamos a nuestro store punto js y aquí en este store van a encontrar el almacenamiento donde se manejan los estados con view es aquí pueden ver que estamos importando view ex que ya está incorporado en nuestro proyecto cuando lo creamos con view click y aquí nos falta una parte que son los gaiters no por defecto no lo crea pero nosotros podemos agregar ya que como les dije es una buena práctica usarlos pero también puedo acceder directamente a través del objeto store y donde esté ese objeto store si nos vamos al archivo mail punto js van a ver que aquí store es el objeto que esté importando desde el archivo store que tengo en mi raíz del proyecto y aquí en la instancia de view viene a ser como un objeto global no porque está justo en la distancia que estamos creando the view si es en el archivo mail punto 10 guardamos todo vamos a hacer lo siguiente aquí vamos a crear esa variable mensaje y vamos a poner view ex desde ok eso queda ahí no hemos hecho ningún cambio nos vamos a nuestro componente hello word y en hello world vamos a borrar este producto y si yo borro este producto como no era un campo requerido nuestra aplicación sigue funcionando solo que ya nos está mostrando y si nos vamos a nuestro view también aquí como ya no tengo el prox pues lo eliminamos sólo estamos llamando directamente al componente hell on word actualizamos no hay nada ahora aquí donde estamos llamando al mensaje vamos a variar algo néstor punto este punto mensaje la vamos y pueden ver ustedes que ahora sí se muestra el estado que tenemos de esta variable donde en el estor aquí entonces estamos accediendo directamente al objeto store a la parte de los estados y estamos llamando al mensaje bien entonces esto es digamos ya uso de estados en nuestra aplicación de view como pueden ver lo estoy utilizando o lo estamos llamando desde un objeto hijo desde el objeto padre podríamos enviarle ese estado pero sería volver a hacer lo mismo porque en el hijo tuviera que hacer el propósito de lo demás sí ya puedo acceder directamente para eso tengo view ex en mi aplicación bien entonces en la elección anterior vimos cómo podemos acceder a los estados que tenemos en nuestro repositorio global con view ex pero lo ideal con la buena práctica es utilizar kiters para poder acceder digamos a esos valores globales e incluso nos puede ayudar para hacer algunas operaciones vamos a hacer ese cambio si me voy al store aquí en el store por ejemplo yo tenía este mensaje y por ejemplo aquí vamos a crear un método que diga mensaje y este método va a recibir como parámetro el stay y de donde estoy obteniendo este state es este objeto que tengo precisamente en la instancia de view vamos a crear este método y lo voy a decir return este punto mensaje no entonces cuando llamamos a este objeto aquí en hello world tuviéramos que utilizar lo siguiente esto punto de tests y punto mensaje probamos esto y pueden ver que tengo el mismo resultado para que ustedes vean que si se está cambiando vamos a poner aquí ceros y pueden ver que si estoy utilizando un gathers para acceder a ese estado habíamos dicho que podríamos utilizar esto para hacer operaciones con datos que tenemos en los estados fíjese bien voy a crear aquí en nombre por ejemplo voy a poner mi nombre brouwer y voy a crear otra variable apellido vásquez no tengo nombre y apellido como datos globales del estado vamos a crear otro método aquí donde le vamos a decir el nombre completo también recibe el stay y le vamos a decir razón y me va a devolver precisamente el stay punto un hombre separado del este y punto apellido p yo aquí es este bien hasta ahí está muy bien perfecto grabamos esto y tenemos aquí un pequeño error vamos a ver qué es lo que está pasando ok nos falta cerrar la comida ahora si grabamos ahora sí como pueden ver solamente nos falta va a poner este cierre bien entonces una vez hecho esto vengo aquí a mi componente hello work vamos a utilizar un h 4 y aquí vamos a llamar a ese gators no estoy punto wieters punto nombre completo ahora vamos y pueden ver que me da el nombre completo que sería la operación que estamos haciendo en este método gathers que tenemos en nuestros estados bien entonces ya conocemos el tema de los estados y también el acceso a los mismos a través de los gaiters vamos a hacer algo en el cual vamos a utilizar las acciones y las mutaciones entonces en la teoría habíamos visto de que una mutación se va a realizar siempre y cuando se ha llamado desde una acción una mutación se va a realizar para cambiar los datos del estado pero para hacer llamar a esta mutación tengo que utilizar una acción o sea hay una comunicación entre ambos para que se pueda dar este detalle entonces vamos a hacer algo vamos a suponer que aquí yo tengo un estado llamado amigos el cual vamos a poner una regla ok y además tengo un amigo que podría agregar a dice arreglo por defecto le voy a poner en nulo fíjense bien tengo un arreglo de amigos y tengo un amigo que voy agregando a este arreglo aquí en las mutaciones vamos a crear un método que diga agregar amigos y ese amigo lo vamos a agregar al estado ok entonces vamos a poner de esta forma llamamos al estado punto amigos que es nuestro arreglo y a este arreglo le vamos a agregar precisamente este valor de amigo entonces a través del estado ingreso ah amigo no y además que le complete vamos a poner aquí coma con el explicó pereiro que complete con amigos este punto amigos perfecto esto queda ahí no es lo que es ahí nos vamos aquí a nuestro hello world vamos a ver por aquí vamos a agregar por ejemplo un h 1h 31 h 2 vamos a ponerlo como un subtítulo que diga amigos ok y luego vamos a agregar una lista no vamos a hacer un mueble y en esta lista vamos a llamar al elemento l vamos a hacer una una directiva bickford para leer precisamente un amigo su índice y esto lo vamos a jalar de donde del store punto este este punto amigos que es el arreglo que tenemos ahí en nuestro store también vamos a tener aquí y el que iba a ser igual al índice perfecto aquí vamos a hacer la interpolación por medio de estas expresiones y vamos a visualizar el amigo no guardamos esto no se visualiza nada aún pero si yo vengo a cada elector por ejemplo vamos a agregar un nombre anna grau pueden ver que está a na pedro están ahí pedro pero lo ideal es que esto lo vamos a ir agregando de forma dinámica a través de las acciones que vamos a hacer en este momento aquí yo tengo la mutación donde llamamos al método agregar amigo y ahora vamos a hacer el método de amigo action esto recibe el contexto no olviden nuestra salida de error porque nos falta hacer un cambio aquí y habíamos dicho que cuando trabajamos con las acciones teníamos que hacer un cómic pero ese cómic vamos a llamarlo desde el contexto punto cómic y vamos a llamar al método precisamente a agregar amigos ok pero por aquí agregamos amigos y listo eso es todo lo que tenemos que hacer aquí y tenemos que llamar a este método a de amigo action desde nuestra vista para que puedan agregarle amigos acá entonces aquí vamos a crear vamos a hacer encima de esto después del subtítulo vamos a poner un input de tipo texto con un abismo del que va a ser igual a amigo ok y seguidamente vamos a poner un botón antes de poner el botón venimos por acá creamos nuestro modelo data no retuvo y aquí voy a tener amigos que va a ser igual a vacío perfecto entonces si escribo albacán fíjense bien se está haciendo el abismo de aquí no pero vamos a inicializar lo en vacío perfecto vamos a tener un método método y en este método vamos a llamar a agregar amigo que ojo esto es del componente no es todavía del store que tenemos esto es del componente y lo que vamos a hacer aquí es indicarle que este estado amigo va a ser igual al valor que tengo en esta caja de texto entonces para ello vamos a hacer lo siguiente tips punto ya molesto punto este punto amigo es igual a punto amigo ok a ese elemento una vez hecho esto y punto néstor punto vamos a utilizar el método this page para llamar precisamente al evento que tenemos aquí a este copiamos pegamos y eso sería todo lo que hay que hacer actualizamos esto ahí está pero aquí en el botón vamos a hacer lo siguiente aquí está el botón vamos a llamar al método clic qué va a llamar a agregar a amigos listo ahora si ponemos a na pueden ver que se agrega a la lista ponemos pedro y pues se cree agregar la lista pero vamos a borrar esto aquí y punto amigo es igual nuevamente a vacío ahí está vamos a ver carlos vamos a actualizar ahora si se borra pero si en la aplicación como es reactiva tenemos nuevamente pedro agregamos anna agregamos carlos y agregamos y pueden ver ustedes que se agregan al arreglo que tengo en mi estado o como un estado de mi aplicación de forma global ojo porque utilizamos a cut is store porque nuestro archivo mail punto js cuando creamos la instancia de view pueden darse cuenta que tenemos este store aquí por lo tanto ese stores iba a llamarse de esta forma bien entonces nos quedamos hasta aquí en este tutorial donde tratamos de abarcar los conceptos básicos del uso de views y el manejo de estados en una aplicación con beauty es nuevamente te invito a suscribirte a nuestro canal y recuerda que tenemos tutoriales todas las semanas así que bienvenido y nuevamente gracias by chicos