zoukankan      html  css  js  c++  java
  • vue实现在进行增删改操作后刷新页面

    问题

    通常在后台管理项目中,对数据进行增删改查是常规操作。在进行这些操作后,需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

    解决方案 || 以删除为例:

    1.强制刷新:this.$forceUpdate()

    2.使用window.reload( ) 或 router.go(0),但会使整个浏览器进行重载,页面闪烁。

    3.重新调用接口:但性能较差,代码冗长。

    4.provide / inject :(推荐)

    点此查看VUE官方解释:

    允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

    首先在App.vue全局设置provide

    在需要刷新的操作页面内注入inject:[‘reload']

    在调用接口操作成功后 this.reload( )

    比如在删除接口调用成功后:

    划重点

    provide:一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

    inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名。

    $nextTick点击查看vue相关文档

    除此之外,provide和inject的用法主要是:在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

    需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

    补充知识:vue主动刷新页面及列表数据删除后的刷新方法

    1.场景

    在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。

    2.遇到的问题

    1. 用vue-router重新路由到当前页面,页面是不进行刷新的

    2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

    3.解决方法

    provide / inject 组合

    作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

    App.vue:

    声明reload方法,控制router-view的显示或隐藏,从而控制页面的再次加载

    <template>
      <transition name="fade">
        <router-view v-if="isRouterAlive"></router-view>
      </transition>
    </template>
    
    <script>
      export default {
        
        data() {
          return {
            isRouterAlive: true
          };
        },
        provide() {
          return {
            reload: this.reload
          };
        },
        methods: {
          reload() {
            this.isRouterAlive = false;
            this.$nextTick(() => {
              this.isRouterAlive = true;
            });
          }
        }
      }
    </script>

    lunbo.vue:

    在页面注入App.vue组件提供(provide)的 reload 依赖,在逻辑完成之后(删除或添加...),直接this.reload()调用,即可刷新当前页面。

    4.provide / inject 用法

    provide:选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

    inject:一个字符串数组,或一个对象,对象的 key 是本地的绑定名

    提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。

    深入理解数据驱动

    以上算是开发过程中的一个坑,用了一段时间,今天再读代码的时候,感觉被坑的很严重。

    1. 获取列表方法

    2.重新获取数据

    3.这样再次调用获取数据,即可同步实现页面数据更新(不会重新刷新页面),同时保证有分页时,能够停留在当前页(刷新前如果是第二页,刷新后依然在第二页),

    即其他查询条件保持不变,体验效果好!

    一个小小后端的爬行痕迹
  • 相关阅读:
    Douglas-Peucker 轨迹压缩算法
    Marching squares 算法 获取轮廓(contour tracing)
    创建Mesh->格子地图转NavMesh->可破坏墙壁
    StretchedBillboard 实现
    程序员的微创业
    买云服务器有推荐吗?国内知道有腾讯云、阿里云...等等,不知道该选哪个好了,另外优惠吗?
    我的阿里云5年
    2021阿里云、腾讯云、华为云、滴滴云评测比较
    终于找到可以一文多发的平台了!
    2019年最新阿里云主机优惠购买指南
  • 原文地址:https://www.cnblogs.com/heikedeblack/p/14338661.html
Copyright © 2011-2022 走看看