vue列表数据删除后刷新页面

目录

• 背景
• 页面刷新方式
• • 1. 原始方法
  • 2.vue 自带的路由跳转
  • 3. 重新调用获取数据列表的接口
  • 4. 使用 provide 和 inject 实现页面刷新

背景

在页面进行增删改列表后，页面需要进行刷新，在进行这些操作后，需要手动刷新才能更新列表。本文主要讨论进行增删改查相关操作后如何使当前页面显示操作后的最新数据。

参考：vue 实现在进行增删改操作后刷新页面

页面刷新方式

1. 原始方法

window.location.reload(); 

2.vue 自带的路由跳转

this.$router.go(0);		
this.$router.go(-1);	

前两种方法都是强制刷新页面，会出现短暂的闪烁，用户体验效果不好。

3. 重新调用获取数据列表的接口

由于当前会有多种方式查询列表数据，包括多种条件查找获取数据列表。接口太多，不好判断当前的数据查找条件，需要编写的代码太冗长，性能也不高。

4. 使用 provide 和 inject 实现页面刷新

本文选择使用这种方式去解决页面的刷新问题。

VUE 官方对 provide 与 inject 的解释

provide : 用于提供可以被后代组件注入的值。这个 provide 选项应当是一个对象或是返回一个对象的函数。这个对象包含了可注入其后代组件的属性。

inject : 用于声明要通过从上层提供方匹配并注入进当前组件的属性。

provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

使用方式

1. 首先在 App.vue 页面设置全局 provide

// App.vue

template>
    div id="app">
      
    	router-view v-if="isRouterAlive">router-view>
	div>
template>
script>
    export default {
        name: 'App',
        provide () {    
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true   	
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;      	
              	
                this.$nextTick(function () {
                    this.isRouterAlive = true;    
                }) 
            }
        }，}
script>

1. 在需要刷新的操作页面内注入 inject: [‘reload’]，在调用接口操作成功后 this.reload()。比如在删除接口调用成功后，调用 this.reload(); 实现页面列表刷新

script>

export default {
    inject:['reload'],        
    methods () {
      deleteConsumerByUser(params)
      		.then(() => {
        			this.reload();	
           })
}
script>

总结

这段代码的主要目的是实现一种组件的“伪刷新”机制，尤其适用于 Vue.js 单页应用中的动态组件或者路由组件。其核心思想是通过改变组件的活跃状态 (isRouterAlive) 来触发组件的重新渲染，从而达到类似于页面刷新的效果，但又不失去单页应用的优点，如状态保持和更快的页面切换速度。

让我们逐步分析 reload()方法代码：

1. 首先设置 isRouterAlive 为 false。这一步相当于告诉 Vue.js 应用，“当前的路由组件不再需要保持活跃状态”。在 Vue.js 中，当一个组件的活跃状态发生变化时，可能会触发生命周期钩子，例如 deactivated 或 beforeDestroy。
2. 使用 this.$nextTick()，这是 Vue.js 提供的一个方法，用于在下次 DOM 更新循环结束后执行延迟回调。这是因为 Vue.js 采用了异步更新机制，即所有的数据更改都会被推迟到下一个事件循环的更新队列中处理，以提高性能。使用 this.$nextTick 可以确保在 DOM 更新之后执行代码，这意味着当前组件的状态已经按照最新的数据进行了更新。
3. 重新设置 isRouterAlive 为 true。当 isRouterAlive 被再次设置为 true 时，Vue.js 会认为这个组件需要重新激活，这可能会触发诸如 activated 或 created 等生命周期钩子，从而重新渲染组件。这种重新渲染可以视为一种“软刷新”，因为它并不涉及整个页面的重新加载，而是只刷新了特定的组件或部分视图。
4. $nextTick 的核心作用是等待 DOM 更新完成，无论这更新是由数据变化引起的还是其他原因。如果在整个应用周期内都没有数据变化，且没有其他需要 DOM 更新的情况发生，那么 $nextTick 的回调将永远不会执行。但在实际开发中，由于用户交互、API 请求等都会引起数据变化，因此 $nextTick 通常会有用武之地。

综上所述，reload()方法 的目的是通过改变组件的活跃状态来模拟页面刷新，尤其是在单页应用中，这种方式可以避免完全页面重载带来的状态丢失问题，同时又能确保应用中的数据和视图是最新的。这种技术在处理表单提交后的重置、列表更新后需要重新加载数据等场景中非常有用。