Vue中恢复数据为初始状态
在 Vue 项目开发过程中,遇到需要重新使用 data 中的数据,但是data中的数据已经被赋值改变了,如何重置data的值为初始状态呢?
解决办法:
- 直接赋值(不建议使用,若有多个地方需要重新设置数据,产生大量重复冗余的代码)
this.form = { 需要设置的数据 }
- 使用this.$options.data()获取初始 data 的值,再使用Object.assign()来复制对象;
this. d a t a : 获 取 当 前 状 态 下 的 d a t a , 也 就 是 要 改 变 的 d a t a 数 据 ; t h i s . data:获取当前状态下的 data,也就是要改变的 data 数据; this. data:获取当前状态下的data,也就是要改变的data数据;this.options.data(): vue原始的数据,就是你页面刚加载时的 data
Object.assign(this. d a t a , t h i s . data, this. data,this.options.data())
若需要给某一个具体的数据 (eg: form) 重新设置值,则使用如下的方法,eg:
Object.assign(this.
d
a
t
a
.
f
o
r
m
,
t
h
i
s
.
data.form, this.
data.form,this.options.data().form)
- 使用全局变量
注意!
data()中若使用了 this 来访问 props 或 methods,用 this.
o
p
t
i
o
n
s
.
d
a
t
a
(
)
重
置
组
件
d
a
t
a
时
,
d
a
t
a
(
)
里
用
t
h
i
s
获
取
的
p
r
o
p
s
或
m
e
t
h
o
d
都
为
u
n
d
e
f
i
n
e
d
,
注
意
t
h
i
s
.
options.data() 重置组件data时,data()里用 this 获取的 props 或 method 都为 undefined,注意 this.
options.data()重置组件data时,data()里用this获取的props或method都为undefined,注意this.options.data() 的 this 指向,最好使用 this.$options.data.call(this)。