Llamar a una API con Fetch desde Vuex store.

En este tutorial vamos a aprender a usar Fetch con Vuex y cómo llamarlo desde un componente de Vue. Para ello vamos a crear una pequeña aplicación en la que vamos a llamar a la API de Google Books. Como usuario voy a introducir el nombre de un autor y la aplicación va a devolver un título con el número de libros publicados junto con una lista de los mismos.

Instalación

Instalar Vue Cli.

npm install -g @vue/cli

Crear nuevo proyecto y elegir el preset por defecto..

vue create g-reads

Instalar Vuex.

npm install vuex --save

Instalar Bulma ( framework CSS ).

npm install bulma

Set up

En primer lugar creamos un fichero llamado store.js en la carpeta src.

nano src/store.js

En main.js importamos store y bulma, quedaría así:

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

import 'bulma/css/bulma.css'

new Vue({
  render: h => h(App),
  store: store
}).$mount('#app')

Store

El store proporciona un repositorio centralizado para compartir el estado en una aplicación de Vue. Su estructura sería la siguiente:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // poner variables y colecciones aquí
  },
  mutations: {
    // funciones síncronas para cambiar el estado e.j. put, edit, delete
  },
  getters:{
    // pon el equivalente a las propiedades computadas aquí
  },
  actions: {
    // funciones asíncronas que puede llamar una o más mutaciones
  }
})

state

Vamos a utilizar 2 variables:

  state: {
    author:"",
    books: [],
  },

mutations

Usaremos 2 mutaciones, la función LOAD_AUTHOR para cambiar la variable author y la función LOAD_BOOKS para cambiar el array books.

 mutations: {
    LOAD_AUTHOR: (state, payload) => (state.author = payload),
    LOAD_BOOKS: (state, payload) => (state.books = payload),
 },

getters

Implementaremos la función countBooks para que devuelva el número de libros que posee el autor.

  getters: {
    countBooks: (state) => state.books.length,
  },

actions

Construimos la función GET_BOOKS , utilizamos el método fetch para recuperar los libros de un determinado autor mediante la API de Google Books añadiéndole una variable de estado en la dirección. A la respuesta, tras convertirla en json, la guardamos en la constante books mediante un mapeo, para finalmente pasarla como parámetro de la mutation LOAD_BOOKS.

  actions: {
    GET_BOOKS: (state) => {
      fetch(
        `https://www.googleapis.com/books/v1/volumes?q=inauthor:${state.state.author}`
      )
        .then((res) => {
          return res.json();
        })
        .then((response) => {
          const books = response.items.map((book) => book.volumeInfo)
          state.commit("LOAD_BOOKS",books)
        });
    },

Nuestro archivo store.js quedaría así:

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    author:"",
    books: [],
  },
  mutations: {
    LOAD_AUTHOR: (state, payload) => (state.author = payload),
    LOAD_BOOKS: (state, payload) => (state.books = payload),
  },
  getters: {
    countBooks: (state) => state.books.length,
  },
  actions: {
    GET_BOOKS: (state) => {
      fetch(
        `https://www.googleapis.com/books/v1/volumes?q=inauthor:${state.state.author}`
      )
        .then((res) => {
          return res.json();
        })
        .then((response) => {
          const books = response.items.map((book) => book.volumeInfo)
          state.commit("LOAD_BOOKS",books)
        });
    },
  },
});

Componentes

Vamos a utilizar cuatro componentes para construir nuestra aplicación. Cada uno de ellos está compuesto por un template y un script.

TitleAuthor.vue

Este componente actúa como título del listado y nos indica el nombre del autor y el número de libros que aparecen de forma reactiva.

Template

Convierte el nombre del autor a mayúsculas e indica el número de libros si los tiene, en caso contrario no muestra nada.

<template>
  <div>
    <h1 
      class="title is-1 has-text-white has-background-primary has-text-centered"     >
      {{ author.toUpperCase() }} TIENE
      {{ countBooks != 0 ? countBooks : "" }} LIBROS
    </h1>
  </div>
</template>

Script

Importamos los Helper mapState para poder mostrar en la vista el estado de la variable computada author y mapGetters para retornar el resultado getter countBooks.

<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: "TitleAuthor",
  computed: {
    ...mapState(["author"]),
    ...mapGetters(["countBooks"]),
  },
};
</script>

AuthorForm.vue

Con este componente pedimos al usuario que introduzca el nombre del autor y mostramos un listado de los libros de este al pulsar un botón.

Template

Formado por un campo input , el cual establece una relación con la variable computada author a través de la directiva v-model y un botón que ejecuta el método showBooks mediante la directiva v-on:click.

<template>
  <div>
    <div class="field">
      <label class="label" for="author">
        Nombre del autor
        <div class="control">
          <input class="input" type="text" v-model="author" />
        </div>
      </label>
    </div>

    <div class="field">
      <div class="control">
        <button class="button is-link" v-on:click="showBooks">Search</button>
      </div>
    </div>
  </div>
</template>

script

Creamos la variable computada author, en la cual se implementan un método get para traer el contenido de la variable y un método set , el cual ejecuta la mutación LOAD_AUTHOR para poder modificar el estado de este.

Por otro lado implementamos el método showBooks que llama a la actions GET_BOOKS si existe el autor, en caso contrario muestra un mensaje de alerta.

<script>

export default {
  name: "AuthorForm",
  computed: {
    author: {
      get() {
        return this.$store.state.author;
      },
      set(value) {
        this.$store.commit("LOAD_AUTHOR", value);
      },
    },
  },
  methods: {
    showBooks: function () {
      if (this.$store.state.author) {
        return this.$store.dispatch("GET_BOOKS");
      }else{
      alert('Introduzca un autor, por favor.');
      }
    },
  },
};
</script>

BookItem.vue

Este componente nos muestra una tarjeta con el título del libro, el nombre del autor y la portada del libro si esta existiese, en caso contrario se muestra una imagen genérica de la portada.

Template

Hace uso de las directivas v-if y v-else para determinar qué imagen de portada debe utilizar, así como de la propiedad book perteneciente al componente padre BookList.vue :

<template>
  <div class="card">
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-128x128">
            <img
              v-if="!book.imageLinks"
              src="https://books.google.es/googlebooks/images/no_cover_thumb.gif"
              alt="smiley face"
            />
            <img v-else :src="book.imageLinks.thumbnail" alt="Real Image" />
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">{{ book.title }}</p>
          <p class="subtitle is-6">{{ book.authors[0] }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

Script

Aquí simplemente accedemos a la propiedad book y damos nombre al componente.

<script>
export default {
  name: "BookItem",
  props: ["book"]
};
</script>

BookList.vue

Muestra una cuadrícula con todos los libros del autor seleccionado previamente.

Template

Accedemos a cada uno de los libros mediante el componente BookItem y el uso de la directiva v-for. A través de la directiva v-bind enlazamos cada item de la state books con la propiedad book, la cual pasamos al componente hijo. Mediante la directiva :key asignamos un identificador a cada iteración.

<template>
  <div class="container card-grid">
    <book-item v-for="book in books" :key="book.industryIdentifiers[0].identifier" :book="book"></book-item>
  </div>
</template>

Script

Importamos el componente BookItem y mapState, con el cual nos traemos la state Books.

<script>
import BookItem from "@/components/BookItem.vue";
import { mapState } from "vuex";

export default {
  name: "BookList",
  components: {
    BookItem,
  },
  computed: {
    ...mapState(["books"]),
  },
};
</script>

App

Nuestro archivo App.vue quedaría como sigue:

Template

Aquí irían las etiquetas de los componentes que vamos a usar.

<template>
  <div id="app">
    <div class="container">
      <title-author></title-author>

      <author-form></author-form>

      <book-list></book-list>
    </div>
  </div>
</template>

Script

Importamos los componentes.

<script>
import BookList from "./components/BookList";
import AuthorForm from "./components/AuthorForm";
import TitleAuthor from "./components/TitleAuthor";

export default {
  name: "App",
  components: {
    BookList,
    AuthorForm,
    TitleAuthor,
  },
};
</script>

Style

La clase css card-grid para mostrar el listado en forma de cuadrícula.

<style>
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1em;
}
</style>

Instalación

Set up

Store

state

mutations

getters

actions

Componentes

TitleAuthor.vue

Template

Script

AuthorForm.vue

Template

script

BookItem.vue

Template

Script

BookList.vue

Template

Script

App

Template

Script

Style

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta