vuex的store中 通过axios进行请求操作获取数据
描述:在项目中遇到vuex的store中直接使用this.$axios或者Vue.axios无法正确进行axios进行请求操作获取数据的原因在平时组件中能使用this.axios(通过Vue.prototype.axios(通过Vue.prototype.axios = axios的方式添加了原型链方法)的方式使用axios请求是因为其挂载到了vue的实例中,因而this的指向是Vue而v...
结合引用
描述:
在项目中遇到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 并引用
更多推荐
所有评论(0)