vue中用vuex来管理axios获取到的数据

目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 vuex 来管理数据,今天就带大家一起来学习一下 如何在 vuex 中利用 axios 请求数据
安装vuex 和 axios ,这里的安装我就不再赘述

开始
1、Vuex的仓库时 store.js ,我们需要把 axios 引入,并在 action 添加新的方法

vue中用vuex来管理axios获取到的数据

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

2 、然后在需要调用的地方**一下 mutations 中的方法

vue中用vuex来管理axios获取到的数据

3、在需要引用的页面,通过 $store.state.data 共享过来数据就可以使用了

vue中用vuex来管理axios获取到的数据

4、接下来就可以直接使用data了
ps;不知道大家有没有犯过和我一样的毛病呢,大家先看一个报错:

vue中用vuex来管理axios获取到的数据

Error in created hook: “TypeError: Cannot read property ‘dispatch’ of undefined”
found in
—> at src\components\increment.vue
at src\App.vue

这个报错呢,其实就是一个疏忽造成的,害我搞了半天,废话不多说,直接上解决方案:
在 main.js 引入 store/index.js 并引用

vue中用vuex来管理axios获取到的数据

希望大家前端之路越走越远,不要犯这种小毛病哦!