vue调用接口没有生效,无打印数据

最新推荐文章于 2023-04-27 17:30:41 发布

bearWeb

最新推荐文章于 2023-04-27 17:30:41 发布

阅读量593

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45090657/article/details/129596791

版权

文章描述了在Vue.js应用中使用Vuex状态管理库时遇到的一个问题，具体是定义了接口API并在Vuex的user模块中尝试调用以获取用户信息。在导航守卫中调用这个action时，接口没有生效，console.log()没有打印，表明代码没有执行到预期的部分。解决方案是清除缓存并刷新到登录页，此时接口开始工作并且成功获取数据。

摘要由CSDN通过智能技术生成

今天想完成一个需求
获取用户信息

1.定义接口api
2.在vuex的user模块导入和调用
	state定义userInfo
	mutations修改userInfo
	actions调用api获取用户信息存储
3.在导航守卫调用action

1.定义接口api
在这里插入图片描述
2.在vuex的user模块导入和调用

3.在导航守卫调用action

此时接口没有生效,也没有打印相应的文字
被前面的导航拦截掉了,没有在else生效,意味着没有走到那一步
因为我console.log(1);没有生效

在这里插入图片描述

问题所在
在这里插入图片描述
解决办法:
清楚后刷新

来到登录页

接口一致
此时

数据也拿到了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

bearWeb

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

解决vue接口数据赋值给data没有反应的问题

01-21

就是我在接口赋值给了data的变量，然后组件的效果没有出来（我的是旋转效果）代码如下： data() { return { slides: [] } }, mounted() { this.request() }, methods: { request() { this.$http.post('...

在异步请求后Ajax请求数据但在vue中无法获取到数据

小野喵的博客哦

12-03

2151

在我们使用vue进行前端编码时，我们总会需要在vue中进行请求操作，而且我们经常不会使用vue中的请求，我们经常会使用一些其他的请求，比如axios或者jquery的请求。下面我们使用一个具体的需求来演示，我们需要获取到请求的数据并将它展示在页面上下面是我们的vue代码我们在浏览器运行一下，可以看到，我们已经请求到数据，但是并没有展示到页面上其实这是因为在请求里面的this不能指向vue对象，我们只需要能指向vue对象即可。所以我们进行下面的改进，我们在vue对象里面新建一个setValue函数来进行数据转

参与评论您还未登录，请先登录后发表或查看评论

vue中当前端请求后端接口时，可以请求成功，状态是200，但是后端缺拿不到请求参数，返回的数据为空。

W78955的博客

04-20

3504

vue中当前端请求后端接口时，可以请求成功，状态是200，但是后端缺拿不到请求参数，返回的数据为空。

npm 启动服务 --- 修改服务端口号

Ccc67ol的博客

04-19

6336

学习配置服务开启的指定端口

在vue的mouted生命周期函数中拿不到data中的数据

weixin_47745553的博客

12-01

3008

因为mounted并不是等created中的代码都执行后再执行，created中的同步代码做完后，mounted执行其中的同步代码，然后created再执行其中的异步代码，而ajax请求回数据是异步代码并且是微任务，所以就造成了在mounted拿数据是空的情况。在created中能拿到数据，如果在mounted中数据写死页面会渲染静态的数据，但如果通过ajax请求拿到的数据当页面渲染就没有数据显示出来，通过后台打印数据发现mounted拿到的数据是空的。

vue方法里面调用了两个异步函数，因此会不执行的问题。

qq_43468165的博客

09-08

1035

正好做到角色管理这部分。对角色列表增删改之后，都应该让当前列表刷新一下。同时因为角色会在用户管理里面用到，所以也需要对状态管理里面的内容进行刷新。下图是删除接口和获得列表的方法，看红色部分就是写错位置了，应该把状态刷新的代码放到获取角色列表方法中，就是图中标红两处只要上面那一处的。可以看到我把获取全部角色的接口写到了状态中若在删除方法中同时执行了this.$store.dispatch("addRoles");和this.getRoles(); 那么不论写法的先后，都是状态中的方法先..

解决vue页面DOM操作不生效的问题

08-27

Vue.nextTick是一个全局API，它接受一个回调函数作为参数，在当前栈执行完毕之后、下次DOM更新循环结束之后、以及所有数据变化完成后被调用。开发者可以把在nextTick中放入需要在数据更新后的DOM操作，这样可以确保...

三步搞定:Vue.js调用Android原生操作

11-19

第一步： Android对Js的接口，新建AndroidInterfaceForJs.js import android.content.Context; import android.os.Build; import android.os.Handler; import android.os.Looper; import android.support....

在vue中使用回调函数,this调用无效的解决

10-14

首先，让我们分析问题的核心：在Vue组件中，当我们在一个函数内部（比如`updateStudentInfoToServer`）使用`this`调用其他方法或访问数据属性时，如果这个函数被作为回调传递给另一个函数（例如`...

vue 解决computed修改data数据的问题

12-13

最近在做项目的时候遇见一个问题，computed修改data数据的时候会报错。报错的大概意思是，不可以修改data数据的属性值。查了一些答案，最终解决办法是需要用到set和get。看代码： data () { return { fold: false...

Vue 接口请求数据传递给子组件获取不到的问题

m0_57547956的博客

09-23

1370

/*在子组件中需要获取商品信息数据，而且父组件中也需要用到，已经在父组件中调用过请求了，拿到了数据，想将数据传递给子组件，正常在子组件标签中写上代码*/ <bottomNavigation :goodsInfo="Data" :RunBuyList ="RunBuyList" @BtnBuyNow="parentClickBuyNow" @BtnFx="parentClickFx" @ListClick="ParentClickList"> </bottomNavigat...

vue如何设置在生产环境中控制台不打印（console.log）信息

qq_41989905的博客

07-22

3543

vue如何设置在生产环境中控制台不打印（console.log）信息

.netcore处理Vue-axios跨越问题解决（通用版）

Renners的博客

08-18

337

前端处理跨越一般都是伪跨越，最近在使用Vue3构建项目，试了一下网上的方法基本都是在前端处理跨越，配置起来相对复杂，如果是有多个项目都需要调用api的话，每个项目都要配置，于是还是决定在后端解决跨越问题；但.netcore支持跨平台，后端项目需要部署在不同版本的操作系统上，仅windows拥有iis，仅配置iis明显不能满足，因此需要使用其他的方法。.以前.net处理跨越问题一般都是在iis上配置Http响应标头；一般在响应标头中配置如下几个参数就能解决大部分跨越问题；...

vue3生产环境配置不打印console.log

黎小小的博客

04-27

1392

把配置写道vue.config.js里了。

记录vue配置跨域不起作用以及一些理解

qq_48445738的博客

09-15

3667

http://127.0.0.1:4050/http://127.0.0.1:4050/test 很显然是不对的。1.请求路径写了全路径这样就是错的你如果写了全地址代理的时候变成了。每次搜跨域都会出来proxytable和proxy 这俩的区别。先看一组标准的配置及请求(请求方式不一样不用管地址差不多就行)其实你可以看着当我们碰到请求中带有/api的时候我们自动带上。不用怀疑自己这样配置是绝对没问题的这样我们是成功的。vue-cli3.0以后使用的proxy。

vue.config.js 中 devServer.proxy 配置说明，以及配置正确不生效问题