结合引用
描述:
在项目中遇到vuex的store中直接使用this.$axios或者Vue.axios无法正确进行axios进行请求操作获取数据的
原因
在平时组件中能使用this.axios(通过Vue.prototype.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)
                    })
                  }
            }

或者 直接引用封装好的你自己的请求数据的api模块


单独引用
安装vuex 和 axios ,这里的安装我就不再赘述,如果安装有问题请参考我的简书 点我去安装axios , 点我去安装vuex
开始
1、Vuex的仓库时 store.js ,我们需要把 axios 引入,并在 action 添加新的方法

在这里插入图片描述
如图,我们在 store/index.js 中引入axios的放啊,然后在action 创建一个方法使用axios,把获取的数据传到 mutations 中激活一下

2 、然后在需要调用的地方激活一下 mutations 中的方法
在这里插入图片描述
3、在需要引用的页面,通过 $store.state.data 共享过来数据就可以使用了
在这里插入图片描述

4.接下来就可以直接使用data了,在 main.js 引入 store/index.js 并引用
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐