在 vue 或 vuex 中如何使用 axios 进行请求操作

在项目中遇到 vuex 的 store 中直接使用 this.$axios 或者 Vue.axios 是无法正确使用 axios 进行请求操作获取数据的，其原因在于组件中能使用 this.axios (通过 Vue.prototype.axios = axios 的方式添加了原型链方法) 的方式使用 axios 请求将其挂载到了vue的实例中，因而this的指向是Vue，而 vuex 中 this 的指向是 store，因此不能直接使用。其解决方法如下：

# 方式一

在 store 中引入 axios

//在store中引入
import axios from 'axios';
actions: {
  fetchOrderList ({commit, state}) {
     // 而vuex中this的指向是store，因此不能使用
     // 直接引入axios请求即可
     axios.post('请求地址').then((res) => {
        commit('updataOrderList', res.data.getOrderList.list)
     }).catch((err) => {
        console.log(err)
     })
   }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 方式二

在 vue 组件中借助 vue-axios 引入 axios

首先使用 npm 安装 axios 、vue-axios 这两个包

npm install axios vue-axios --save
npm install qs.js --save　　#这一步可以先忽略，安装axios时默认已经安装了，它的作用是能把json格式的直接转成 data 所需的格式，安装成功后，在 main.js 页面引用

1
2

import Vue from 'vue';
import VueAxios from 'vue-axios';
import axios from 'axios';
import qs from 'qs';

Vue.use(VueAxios, axios); //全局注册，使用方法为:this.axios
Vue.prototype.qs = qs;    //全局注册，使用方法为:this.qs

1
2
3
4
5
6
7

# 方式三

在 vue 组件中直接引入 axios

首先使用 npm 安装 axios 这个包

npm install axios --save
npm install qs.js --save　　#这一步可以先忽略，安装axios时默认已经安装了，它的作用是能把json格式的直接转成 data 所需的格式，安装成功后，在 main.js 页面引用

1
2

import Vue from 'vue';
import axios from 'axios';
import qs from 'qs';

Vue.prototype.$axios = axios;  //全局注册，使用方法为:this.$axios
Vue.prototype.$qs = qs;      //全局注册，使用方法为:this.$qs

1
2
3
4
5
6

本文介绍的是axios 在 vue 中的基本用法，关于 axios 详细内容看官方文档 https://github.com/axios/axios (opens new window)

#Vue

上次更新: 2024/01/30, 00:35:17

← 在 Vue 中读取本地文本文件（兼容各种浏览器）在 vue 项目中 mock 的基本使用方法→