在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)
                    })
                  }
            }