在 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
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
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
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
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
2
3
4
5
6
本文介绍的是axios 在 vue 中的基本用法,关于 axios 详细内容看官方文档 https://github.com/axios/axios (opens new window)
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13