Contenido del curso
Ricardo Portillo
Leandro Jose Nobles Avila
Contenido del curso
Ricardo Portillo
Leandro Jose Nobles Avila
Fernando Jorge Bardelli
Diana Martinez
Uriel Solis Salinas
Mauricio Combariza
Julian David Alzate Cuervo
Seba Cardoso
Mauricio Combariza
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.
también se puede utilizar un directorio llamador services donde se guarden todas las apis, y solo sea importar donde se utilicen
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.
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.
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); }, }, }
URL
https://jsonplaceholder.typicode.com/users/1
héroe sin capa
gracias
getUser
export const getUser = async (userId) => { const res = (await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)).json() return res; }