In Vue2 and Vue3, the Object.assign() method is used to initialize or empty the object data.

Business scene:

Click the Add button to fill in the input of the form. When the pop-up box is reopened, the content of the pop-up box needs to be reset.
Or when implementing the reset button function, some data needs to be blanked.

Vue2 writing method

It is implemented through the built-in method of vue2.

//this.$data Get the data in the current state

//this.$options.data() Get the data in the initial state of the component

Object.assign(this.$data, this.$options.data())

Vue3 writing method

//定义一个函数把需要的值return出来
const dataDefault = () => {
    
    
  return {
    
    
    formData: {
    
    
      data: ''
    },
    searchData: {
    
    
      data: ''
    }
  }
}

//把返回值进行reactive,然后得到数据
const state = reactive(dataDefault())

//重置按钮
const resetClick = () => {
    
    
  //  state.formData 当前值    dataDefault().formData 页面初始进入时设置的值
  //  该步操作把初始值重新赋值给当前值,达到重置对象值的目的。
  Object.assign(state.formData, dataDefault().formData);
}

Guess you like

Origin blog.csdn.net/m54584mnkj/article/details/129046802