Helpers

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

Ricardo Portillo

student•

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

student•

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

student•

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

student•

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.

Uriel Solis Salinas

student•

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) {
      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

student•

URL

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

Julian David Alzate Cuervo

student•

héroe sin capa

Mauricio Combariza

student•

getUser

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