具体描述
- 在项目中遇到vuex的store中直接使用this.$axios或者Vue.axios无法正确进行axios进行请求操作获取数据的
原因
- 在平时组件中能使用this.
axios(通过Vue.prototype.
axios = axios的方式添加了原型链方法)的方式使用axios请求是因为其挂载到了vue的实例中,因而this的指向是Vue
- 而vuex中this的指向是store,因此不能直接使用
解决方法
// 数据仓库中:src/store/modules/xxx.js
// 引入axios
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)
})
}
}