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
- Register Vuex in
src/main.js
.
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;
}
}
};
- Register the module in
src/store/index.js
:
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 thequery
state.articles
to update the result.
getters
return the state
.
← Vuex