解决Vue 不顺序执行方法、树形表格对子数据修改后的自动刷新等

针对VUE开发中遇到的坑

VUE 一款国人研发的强大的前端框架
与elementUI的高密度融合给后端人员也带来的很大的福利
小编这不也上手学习了,但是虽然学习简单,上手操作那可是处处大坑啊
今天小编就来说手VUE与ElementUI整合的一些坑

大坑一

VUE刷新页面后导航栏的已选中被重置

• 大家都知道ElementUi的导航栏组件会有一个默认选中的标签，我们可以通过鼠标点击来切换标签，但是当开发时每次刷新页面后，我们已经点击的标签都被重置，但是展示的页面依旧是上次选中标签后跳转的页面，大家可以先看图：

  • 未选择标签时默认展示首页(代码)：

    • 
    • 

  • 未选择标签时默认展示首页(效果)：

    • 

• 但是此时如果点击了其他的标签,如 hehe,会发现刷新后标签页又被重置到首页

  • 点击hehe后

    • 

  • 点击hehe刷新后

    • 
• 错误分析：由于标签页的默认选中在vue实例中绑定的值是不变的所以每次刷新后改值再次渲染到标签页,那么就会出现刷新重置的效果,可以猜测一下,只需将改值变为动态获取即可

• 解决方案：直接在vue实例中与标签绑定的值修改为：this.$route.path 这个值代表获取当前路由地址,即是每个标签页的index的值;设置后我们看下效果:

  • 设置代码

    • 
  • ps:此种方式必须要求标签的index属性的值必须是正确的路由路径

大坑二

ElementUi的树形表格子数据修改后自动刷新

• ElementUI中的树形表格相信大家也经常使用，里面包含的子数据在类别展示时非常的直观形象，但是小编在使用中还是发现了一小坑，就是在利用axios删除或者修改某一子数据后，子数据不会自动渲染到页面，图示如下：

  • 树形表格大榄：

    • 

  • 代码

    • 
• 经过测试发现，这个下拉箭只会在进入当前页第一次点击时才会进入子加载的代码，所以此时修改了子数据，即是再次点击下拉箭头也不会更新子数据，这块大家也可以自己测试一下看下效果

• 解决方案：

  //可在修改操作后重新查询并执行以下代码
  this.$set(
      this.$refs.myTable.store.states.lazyTreeNodeMap, 
      parentId, 
      list);    
   //参数一写死
   //参数二代表需要跟新的父数据id值
   //ps:不一定是id 根据自己再表格中row-key="id"绑定的值来确认
   //参数三更新的数据 即数据经过修改重新查询后的数据
   

大坑三

vue中axios发送post请求时传参问题

• 大家都知道post请求的传参方式是利用请求体携带的方式来传参 那么在post传递参数时前端的数据格式是json 后端是java 所以在vue前后端分离项目中会存在后端参数接收不到的情况

• 情况1：

  • 前端传递的json格式是 对象形式的json

    • 

• 解决方案：

  • 在springboot控制器对应的方法的参数位置添加@RequestBody注解

    • 

• 情况2：

  • 前端传递的json格式是 键值对的json

• 解决方案1：

  • 利用vue的组件qs将参数拼接成键值对的方式 ps:qs需要单独下载

    • 

• 解决方案2：

  • 利用js的内置对象 URLSearchParams 来拼接出一个标准的键值对形式的参数

    • 
  • ps:此种方式存在不兼容浏览器的情况 所以还是不是的较好

大坑四

vue方法内代码不顺序执行的问题

• 由于vue大量使用axios发送异步方式的请求，所以在代码执行遇到异步请求后并不会等待异步请求的执行完毕，此时如果下面的代码需要用到异步请求的返回结果，那么问题就来了：

  • 还是利用上面树形表格的例子，当我们进行修改操作后，需要用异步请求发送到后台查询最新的数据，再执行vue更新数据的方法，此时经过测试发现，vue更新数据的方法会先执行，那么此时数据并不是最新数据，将会导致渲染失败，代码：

  //删除一个级别
  handleDelete(index, row) {
      //删除的post请求
      1  this.$http.post("url", parem).then((res) => {
          _this.mesg(res);
      });
      //重新查询数据 方法内将数据赋值给this.parentData
      2  this.findByLevel();
      3  console.log(this.parentData);
      //更新子集数据
      4  his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, row.parentId, this.parentData);
  },
  //查看网页效果发现表格子数据并没有更新 但DB正确更新数据
  //经过测试发现第三步的打印最新数据的时候 并不是DB的最新数据 这就比较懵逼了 明明跟新了数据啊

• 我们不妨猜测一下是否 第二步更新数据的方法并没有等待第一步的执行 或者第四步没有等待第二步的执行？带着这个问题度娘了一番，最终发现猜想正确 并找到一篇比较好的示例网站 贴给大家：async函数的使用

• 解决方案：

  //在方法上标注async函数
  async handleDelete(index, row) {
      //在必须等待的异步请求的调用前标注 await
      await this.$http.post("url", parem).then((res) => {
          //ps:如果在异步请求内又包含了一个异步请求那么即使在内部请求中也使用了async 和 await 同样无效 仍然不会等待此方法的执行
          _this.mesg(res);
      });
      //同样标注await
      await this.findByLevel();
      console.log(this.parentData);
      
      his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, row.parentId, this.parentData);
      },

写在后面

那么今天对vue的使用中发现的坑的探讨就到这里了
日后如果遇到高级坑依旧会来更新文章
还请小伙伴们多多关注啦 有问题随时随时留言哦

自觉尊重人民的劳动成果 转发请备注！！！