Helpers

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.

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);
    },
  },
}

URL

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

getUser

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