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

背景

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

参考：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 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

使用方式

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

// App.vue

<template>
    <div id="app">
      <!-- 使用 v-if 判断 isRouterAlive 变量，只有当它为真时，才显示此组件 -->
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。                                             
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true   	//控制视图是否显示的变量
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;      	//先关闭
              	// 
                this.$nextTick(function () {
                    this.isRouterAlive = true;    //再打开
                }) 
            }
        }，
    }
</script>

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

<script>

export default {
    inject:['reload'],        //注入App里的reload方法
    methods () {
      deleteConsumerByUser(params)
      		.then(() => {
        			this.reload();	// 删除完成后，刷新页面
           })
}
</script>

总结

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

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

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

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