专栏名称: 前端代码仔
前端攻城狮
今天看啥  ›  专栏  ›  前端代码仔

Vue中恢复数据为初始状态

前端代码仔  · 掘金  ·  · 2021-01-16 15:04

文章预览

阅读 104

Vue中恢复数据为初始状态

在 Vue 项目开发过程中,遇到需要重新使用 data 中的数据,但是data中的数据已经被赋值改变了,如何重置data的值为初始状态呢?

解决办法:

1. 直接赋值(不建议使用,若有多个地方需要重新设置数据,产生大量重复冗余的代码)
this.form = { 需要设置的数据 }
复制代码
2. 使用this.$options.data()获取初始 data 的值,再使用Object.assign()来复制对象;

this.$data:获取当前状态下的 data,也就是要改变的 data 数据; this.$options.data(): vue原始的数据,就是你页面刚加载时的 data

Object.assign(this.$data, this.$options.data())
复制代码

若需要给某一个具体的数据 (eg: form) 重新设置值,则使用如下的方法,eg:
Object.assign(this.$data.form, this.$options.data().form)
复制代码

3. 使用全局变量

注意!

data()中若使用了 this 来访问 props 或 methods,用 this.$options.data() 重置组件data时,data()里用 this 获取的 props 或 method 都为 undefined,注意 this.$options.data() 的 this 指向,最好使用 this.$options.data.call(this)。

………………………………

原文地址:访问原文地址
快照地址: 访问文章快照
总结与预览地址:访问总结与预览