目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 vuex 来管理数据,今天就带大家一起来学习一下 如何在 vuex 中利用 axios 请求数据
安装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了
ps;不知道大家有没有犯过和我一样的毛病呢,大家先看一个报错:
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 并引用
希望大家前端之路越走越远,不要犯这种小毛病哦!