How to Use Axios in a Vue Project demo repo

Vuex (opens new window) is a state management pattern and library for Vue.js applications.

Axios (opens new window) is a promise based HTTP client for the browser and node.js.

This tutorial uses Wikipedia's Opensearch API (opens new window).

# 👣 Steps

Create a Vue project and select the Vuex feature. If it is inside an existing project, add Vuex with vue add vuex.

npm i -g @vue/cli
vue create vue-demo
cd vue-demo
npm i axios

import store from "./store";

const app = createApp(App);

app
  .use(store)
  .use(router)
  .mount("#app");

Create a template, e.g. in src/views/vuex-axios.vue.

<template>
  <div>
    <h1>Vuex Demo with Axios</h1>

    <input
      v-model="query"
      autofocus
      class="form-control mb-4"
      placeholder="Search from Wikipedia"
      type="text"
      @input="getArticles"
    />

    <ul class="list-group list-unstyled">
      <li v-for="(item, index) in articles" v-show="item.title" :key="index">
        <a
          :href="item.url"
          class="list-group-item list-group-item-action"
          target="_blank"
        >
          <h1>{{ item.title }}</h1>

          <p>{{ item.snippet }}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

Create a module, e.g. src/store/wikipedia.js.

import axios from "axios";

export default {
  state: () => ({ query: "", articles: [] }),

  actions: {
    async getArticles({ state, commit }) {
      const url = `https://en.wikipedia.org/w/api.php?action=opensearch&search=${state.query}&origin=*`;

      const response = await axios.get(url);

      const articles = [];

      for (let i = 0, j = response.data[i].length; i < j; i++) {
        articles[i] = {
          title: response.data[1][i],
          snippet: response.data[2][i],
          url: response.data[3][i]
        };
      }

      commit("articles", articles);
    }
  },

  mutations: {
    updateQuery(state, query) {
      state.query = query;
    },
    articles(state, articles) {
      state.articles = articles;
    }
  },

  getters: {
    query: (state) => {
      return state.query;
    },
    articles: (state) => {
      return state.articles;
    }
  }
};

import { createStore } from "vuex";

import wikipedia from "./wikipedia";

export default createStore({
  modules: {
    wikipedia
  }
});

Use Vuex to complete the template, i.e. in src/views/vuex-axios.vue.

<template>
  <div>
    <h1>Vuex Demo with Axios</h1>

    <input
      v-model="query"
      autofocus
      class="form-control mb-4"
      placeholder="Search from Wikipedia"
      type="text"
      @input="getArticles"
    />

    <ul v-if="query" class="list-group list-unstyled">
      <li v-for="(item, index) in articles" v-show="item.title" :key="index">
        <a
          :href="item.url"
          class="list-group-item list-group-item-action"
          target="_blank"
        >
          <h1>{{ item.title }}</h1>

          <p>{{ item.snippet }}</p>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    query: {
      get() {
        return this.$store.getters.query;
      },
      set(value) {
        this.$store.commit("updateQuery", value);
      }
    },
    articles() {
      return this.$store.getters.articles;
    }
  },
  methods: {
    getArticles() {
      if (this.query) {
        this.$store.dispatch("getArticles");
      }
    }
  }
};
</script>

# 📖 Explanation

# Template

@input="getArticles" means that when query changes, the getArticles method will be executed.

The articles will be placed inside ul under the input.

The input is bound to the query in the computed part. When there is an input, the set part will commit the changes. The get part is what the input will show.

Finally, the methods contain the getArticles method. If the search bar is not empty, this method dispatches the getArticles action.

# Store

Initially, the query and articles array are empty.

Pass the query from state to the url. Use axios.get(url) to use Axios.

Process the response to a better format to consume, then commit that. The first articles in commit("articles", articles); corresponds to the item in mutations. The second one is the result to be passed.

There are 2 items in mutations:

updateQuery to change the query state.
articles to update the result.

getters return the state.

← Vuex