Uso de Vue Router y Vuex 🔥

• Antes de comenzar te recuerdo que para sacar todo el partido al curso de Vue Router debes tener conocimientos esenciales de Vuex. ¿Por qué?, quizás te preguntes. La respuesta es sencilla: en la mayoría de proyectos Vue Router y Vuex se utilizan a la vez, porque lo es importante que entiendas cómo funcionan en combinación.
• En Escuela Vue cuentas con un curso de Vuex que cubre todo lo que necesitas saber, así que te recomiendo que le eches un vistazo.
• Igual que hicimos con Vue Router, vamos a instalar la dependencia Vuex en nuestro proyecto. Como usamos Vue CLI vamos a lanzar una sesión de Vue UI para completar el proceso.
• Tras terminar la instalación verás que algunos archivos (como main.js) se han modificado y otros (como store/index.js) se han creado.
• Como primer paso para centralizar nuestro estado (los usuarios) vamos a delegar su carga a Vuex, por lo que tendremos que configurar la store con sus piezas fundamentales: state, mutations y actions.

const store = new Vuex.Store({
  state: {
    users: []
  },
  mutations: {
    setUsers(state, users) {
      state.users = users;
    }
  },
  actions: {
    setUsers({ commit }) {
	...
    }
  },
});

export default store;

• Ahora, llamada a la API de Random User que se encuentra en AppUserList debe ser movida a la store principal, dentro de la acción setUsers.

async setUsers({ commit }) {
    try {
        await fetch("https://randomuser.me/api/?results=100")
            .then(data => data.json())
            .then(data => commit("setUsers", data.results));
    } catch (error) {
        console.error(error);
    }
}

...

store.dispatch("setUsers");

• Si comprobamos el estado en el tab Vuex de las Vue Developer Tools veremos que todo funciona correctamente y ahora state.users ha sido hidratado al arrancar el proyecto.
• Sabiendo que los usuarios que se cargan son 100 diferentes cada vez y para mantener la integridad de la aplicación (imagina que guardas una URL de un usuario y luego este al volver a cargar no existe) vamos a usar el almacenamiento local para cachear los usuarios y pedir nuevos sólo en caso de que no existan localmente.

async setUsers({ commit }) {
  const users = window.localStorage.getItem("users");
  if (users) {
    commit("setUsers", JSON.parse(users));
  } else {
    try {
      await fetch("https://randomuser.me/api/?results=100")
					...
          window.localStorage.setItem(
            "users",
            JSON.stringify(data.results)
          );
        });
    } catch (error) {
      console.error(error);
    }
  }
}

• Ahora tenemos que modificar AppUserList para usar nuestra store a través del mapState.

import { mapState } from "vuex";
computed: {
  ...mapState(["users"])
}

• En el componente AppUser usamos también mapState y propiedades computadas para buscar el user que corresponde a $route.username en nuestra store.

<script>
import { mapState } from "vuex";
export default {
  name: "AppUser",
  data() {
    return {
      username: this.$route.params.username
    };
  },
  computed: {
    ...mapState(["users"]),
    user() {
      return this.users.find(user => user.login.username === this.username);
    },
    userData() {
      return {
        fullName: `${this.user.name.first} ${this.user.name.last}`,
        thumbnail: this.user.picture.large
      };
    }
  }
};
</script>