在vuex的store中如何正确的通过axios进行请求操作获取数据

具体描述

• 在项目中遇到vuex的store中直接使用this.$axios或者Vue.axios无法正确进行axios进行请求操作获取数据的

原因

• 在平时组件中能使用this.$axios(通过Vue.prototype.$axios = axios的方式添加了原型链方法)的方式使用axios请求是因为其挂载到了vue的实例中，因而this的指向是Vue
• 而vuex中this的指向是store，因此不能直接使用

解决方法

• 直接引入axios而后通过其请求即可

            // 数据仓库中：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)
                    })
                  }
            }