Cursos Empresas Blog Live Conf Eventos Precios

0:0012:23

Helpers

Curso de Vue.js: Manejo del Estado con Vuex

Clase 10 / 19

Ver clases

Helpers

Curso de Vue.js: Manejo del Estado con Vuex

Clase 10 de 19

Clase 10 / 19

Helpers

Curso de Vue.js: Manejo del Estado con Vuex

Clase 10 / 19

Ver clases

Comentarios

Ricardo Portillo#3860778
Como aporte en el ejemplo mostrado por la profesora se usa un helper para el api pero el Fetch puede ser colocado directamente en el action. El objetivo de separarlo es reducir código y agrupar el contenido para un mayor mantenimiento. Pero esto va depender lo extenso de tu proyecto.

Al crear proyecto deben ser progresivo su crecimiento es decir cada decisión debe ser realizada en el momento y no previendo solo el futuro. El aporte es para brindarle a los nuevos programadores una visión más flexible de su proyecto y mayor toma de decision.
Fernando Jorge Bardelli#3974981
Si se guaran datos en el Store, datos propios de una vista/pagina por ejemplo, comprobante de pago, para comunicar a todas sus partes. y después pasamos a otra pagina a hacer otras funciones, esos datos almacenados en el store, que quedan en memoria, no terminen siendo un problema de consumo de recurso si no los limpiamos? al rato de cambiar y cambiar de vistas haciendo cosas en la app.
Uriel Solis Salinas#4699097
Helpers

. Cuando trabajamos con el manejo de estado Vuex y después de haber visto las actions se puede llegar a utilizar código JS dentro de Vuex, es decir, módulos que solamente estén en JS vanilla sin necesidad de ser componentes en Vue o otros elementos dentro de Vuex, incluso podrían ser librerías de terceros o desarrolladas por tu propio equipo, entonces se necesita poder integrar todo lo que tiene que ver con JS vanilla dentro de nuestro manejo de estado.

Un ejemplo podría ser el llamado de una API, en este caso se creo una carpeta y archivo common/index.js
```
export const getUser = async (userId) => {
  const res = (
    await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
  ).json();

  return res;
};
```
Ya teniendo la función para poder hacer la petición, y poder usarlo en el manejo de estado con Vuex, primero es necesario exportar la función, agregarle async y await a la función dentro de las actions, es importante decir que las actions pueden ser asíncronos, es decir, pueden ejecutar funciones que retornen una promesa.
```
import { getUser } from "@/api";

const store = createStore({
...
actions: {
    async updateUsername({ commit, state }, username) {
      console.log(state.username, username);
      // Petición a la API para obtener el nombre del usuario.
      const user = await getUser(1);
      console.log(user);
      commit("updateUsername", user.name);
    },
  },
}
```
. Otro tip que se usa mucho en el ecosistema de Vuex, es crear un archivo donde se guardan todas las constantes para poder llamar a todos los commits e incluso también a las actions, y esto es para ahorrar estar escribiendo cadenas de texto y para que sea accesible en toda la aplicación.
```
// ruta common/mutation-types.js
export const COMMIT_UPDATE_USERNAME = "updateUsername";
```
Se tiene que importar y cambiar el nombre en mutation y actions en el archivo index.js:
```
// ruta store/index.js
import { COMMIT_UPDATE_USERNAME } from "@/common/mutation-types.js";

const store = createStore({
...
mutations: {
    COMMIT_UPDATE_USERNAME {
      state.username = username;
    },
  },
actions: {
    async updateUsername({ commit, state }, username) {
      console.log(state.username, username);
      // Petición a la API para obtener el nombre del usuario.
      const user = await getUser(1);
      console.log(user);
      commit(COMMIT_UPDATE_USERNAME, user.name);
    },
  },
}
```

Mauricio Combariza#4163558

URL

https://jsonplaceholder.typicode.com/users/1

Seba Cardoso#5675607
gracias

Mauricio Combariza#4163655

getUser

export const getUser = async (userId) => {
    const res = (await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)).json()
    return res;
  }

Uriel Solis Salinas

Hace 4 años

Helpers

. Cuando trabajamos con el manejo de estado Vuex y después de haber visto las actions se puede llegar a utilizar código JS dentro de Vuex, es decir, módulos que solamente estén en JS vanilla sin necesidad de ser componentes en Vue o otros elementos dentro de Vuex, incluso podrían ser librerías de terceros o desarrolladas por tu propio equipo, entonces se necesita poder integrar todo lo que tiene que ver con JS vanilla dentro de nuestro manejo de estado.

Un ejemplo podría ser el llamado de una API, en este caso se creo una carpeta y archivo common/index.js

export const getUser = async (userId) => {
  const res = (
    await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
  ).json();

  return res;
};

Ya teniendo la función para poder hacer la petición, y poder usarlo en el manejo de estado con Vuex, primero es necesario exportar la función, agregarle async y await a la función dentro de las actions, es importante decir que las actions pueden ser asíncronos, es decir, pueden ejecutar funciones que retornen una promesa.

import { getUser } from "@/api";

const store = createStore({
...
actions: {
    async updateUsername({ commit, state }, username) {
      console.log(state.username, username);
      // Petición a la API para obtener el nombre del usuario.
      const user = await getUser(1);
      console.log(user);
      commit("updateUsername", user.name);
    },
  },
}

. Otro tip que se usa mucho en el ecosistema de Vuex, es crear un archivo donde se guardan todas las constantes para poder llamar a todos los commits e incluso también a las actions, y esto es para ahorrar estar escribiendo cadenas de texto y para que sea accesible en toda la aplicación.

// ruta common/mutation-types.js
export const COMMIT_UPDATE_USERNAME = "updateUsername";

Se tiene que importar y cambiar el nombre en mutation y actions en el archivo index.js:

// ruta store/index.js
import { COMMIT_UPDATE_USERNAME } from "@/common/mutation-types.js";

const store = createStore({
...
mutations: {
    COMMIT_UPDATE_USERNAME {
      state.username = username;
    },
  },
actions: {
    async updateUsername({ commit, state }, username) {
      console.log(state.username, username);
      // Petición a la API para obtener el nombre del usuario.
      const user = await getUser(1);
      console.log(user);
      commit(COMMIT_UPDATE_USERNAME, user.name);
    },
  },
}

Comentarios (6)6 comentarios

Ricardo Portillo

Como aporte en el ejemplo mostrado por la profesora se usa un helper para el api pero el Fetch puede ser colocado directamente en el action. El objetivo de separarlo es reducir código y agrupar el contenido para un mayor mantenimiento. Pero esto va depender lo extenso de tu proyecto.

Al crear proyecto deben ser progresivo su crecimiento es decir cada decisión debe ser realizada en el momento y no previendo solo el futuro. El aporte es para brindarle a los nuevos programadores una visión más flexible de su proyecto y mayor toma de decision.

Leandro Jose Nobles Avila

también se puede utilizar un directorio llamador services donde se guarden todas las apis, y solo sea importar donde se utilicen

Fernando Jorge Bardelli

Si se guaran datos en el Store, datos propios de una vista/pagina por ejemplo, comprobante de pago, para comunicar a todas sus partes. y después pasamos a otra pagina a hacer otras funciones, esos datos almacenados en el store, que quedan en memoria, no terminen siendo un problema de consumo de recurso si no los limpiamos? al rato de cambiar y cambiar de vistas haciendo cosas en la app.

Diana Martinez

Claro, por eso hay que tener cuidado con el manejo y lo que debe quedar en memoria y lo que no.

También recomiendo aprender Pinia, ya que por su nueva sintaxis mejora bastante, incluyendo estos temas.

Mauricio Combariza

Julian David Alzate Cuervo

Hace 3 años

héroe sin capa

Seba Cardoso

Hace 4 meses

gracias

Helpers

Helpers

Helpers

Progreso del curso

Introducción

Conceptos básicos

Organización de código

Modelo de datos

Cierre del curso

Comentarios

Helpers

Helpers

Helpers

Comentarios

Helpers