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

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

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

在这里插入图片描述

如图,我们在 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
—> at src\components\increment.vue
at src\App.vue

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

image.png

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

  • 2
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值