Vue 3.0 中重置 reactive 定义的响应式对象数据，恢复为初始值

1、直接挨个重置数据（不适用对象中有多个属性，比较繁琐）2、使用Object.assign()

文章共199字 · 阅读需要大约1分钟

一键AI生成摘要，助你高效阅读

问答

长相思979

2734人浏览 · 2023-11-20 10:43:30

长相思979 · 2023-11-20 10:43:30 发布

Vue 3.0 中如何重置 reactive 定义的数据，恢复为初始值？ - 知乎

1、直接挨个重置数据（不适用对象中有多个属性，比较繁琐）

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  name: 'John'
})


// 重置数据：
state.count = 0
state.name = 'John'

2、使用Object.assign()

import { reactive, ref } from "vue";

//保存初始化数据
const initInputData = {
  datasourceName: "",
  driverClassName: "",
  url: "",
  userName: "",
  password: "",
  startYear: "",
  endYear: "",
  status: true,
  action: "submit",
  id: "",
  ip:'',
  port:''
}
const inputData = reactive({...initInputData});

//重置函数
const resetInputData = () => {
  Object.assign(inputData,initInputData)
}