Curso Vue Router esencial: aprende a enrutar con Vue

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>

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue