Vue重置当前页面数据

Posted 2023-05-01

参考技术A 问题：在做一个问卷调查的后台管理项目，有一个需求，创建题目后可以选择完成并创建下一题，此时需要将整个页面的数据重置，来清空input数据。

方案1：使用$router.go(0)；和location.reload()，刷新当前页面，来初始化数据，可以实现，但刷新时会闪一下屏，体验并不好。

方案2：查看了Vue重置数据的方法：Object.assign(this.$data, this.$options.data()；发现重置后报错，报错原因是我在data中获取了router的传值：this.$route.query.id，报错内容为$route undefind，再次查找原因，找到一篇文章： https://blog.csdn.net/mocoe/article/details/89682022

于是改成Object.assign(this.$data, this.$options.data.call(this))；问题解决

vue 重置刷新页面数据（最快捷 简单的方式，全局定义）

第一种方式 reload

一、在根文件 app.vue文件中配置

app.vue

<template>
  <!-- 给全局挂载 适配元素 app -->
  <div id="app">
      <keep-alive include="DataSet">
        <!-- 配置重置刷新  v-if="isRouterAlive" -->
        <router-view v-if="isRouterAlive" />
      </keep-alive>
  </div>
</template>

<script>
import _ from 'lodash'
export default 
  name: 'App',
  //自定义
  provide() 
    return 
      reload: this.reload
    
  ,
  data() 
    return 
     //定义状态
      isRouterAlive: true
    
  ,
  methods: 
    //重置
    reload() 
      this.isRouterAlive = false
      this.$nextTick(() => 
        this.isRouterAlive = true
      )
    
  

</script>

二、在需要引用重置的页面中添加

dataSet.vue <<<=（需要引入的页面）

export default 
//使用options.d.ts 当中的inject变量 获取APP 里的配置状态(然后在需要调用的接口当中 加入this.reload)
inject: ['reload'], 
   data() 
    return 
    ...
  ,
  methods: 
    //重置
    getReload() 
      this.reload() //调用刷新
    ,
  

大功高成！！！

---

喜欢的老铁们，给 木鱼 加个关注 一键三连呦!

---

补充：（推荐使用第一种 方式 reload，体验度好，无空白页面）

以下两种方式也是实现重置刷新的功能
缺点：相当于按ctrl+F5 强制刷新那种，整个页面重新加载，会出现一个瞬间的空白页面，体验度不好

（2）window.location.reload()

（3）this.$router.go(0)