vue-cli+vuex+axios请求数据

目前主流的 Vue 项目，都选择 axios 来完成 ajax 请求，而大型项目都会使用 vuex 来管理数据，今天就带大家一起来学习一下 如何在 vuex 中利用 axios 请求数据

安装vuex 和 axios ，这里的安装我就不再赘述，如果安装有问题请参考我的简书 点我去安装axios ， 点我去安装vuex

开始

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

image.png

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

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

image.png

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

image.png

4、接下来就可以直接使用data了

ps；不知道大家有没有犯过和我一样的毛病呢，大家先看一个报错：

image.png

Error in created hook: "TypeError: Cannot read property 'dispatch' of undefined"

found in

---> <Increment> at src\components\increment.vue
<App> at src\App.vue
<Root>

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

image.png

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