重置为 vuejs 中的初始数据，但仅针对某些值

Question

下面的 vuejs 组件代码成功地设置了 playerName、时间和错误数据的初始状态。将初始数据提取到函数中可以让我轻松地将数据重置回初始状态。

太好了...但是...我只希望时间和错误能够重置为初始状态，并且我希望 playerName 继续存在。

有没有推荐的方法来完成这个？我似乎只能找到全有或全无的方法或手动重置的笨拙方法，这需要我记住将来是否要更改。

感谢您的关注和任何帮助。

function initialState (){
  return {
    playerName: '', 
    time: 0, 
    errors: 0
  }
}

//In my component:
data: function (){
    return initialState();
} 


//Call this method when I want to start over
methods:{
    reset: function (){
        Object.assign(this.$data, initialState());
    }
}

Answer 1

您可以使用初始状态并重新合并您的守护者，然后再使用超级速记内联合并重新分配：

export default {

  data: () => ({
    playerName: '', 
    time: 0, 
    errors: 0
  })

  methods: {

    reset () {

      const playerName = ...this.playerName; // Use Spread (...) to clone this.playerName so we don't assign a reactive copy that becomes blank again.

      return Object.assign(this.$data, { ...this.$options.data(), playerName })

    }

  }

}

内联合并{ ...this.$options.data(), playerName }是ES6的trait，playerName注入和写法一样：

{ ...this.$options.data(), playerName: ...this.playerName }

this.$options.data() 在做什么：

{ ...{ playerName: '', time: 0, errors: 0 }, playerName: ...this.playerName }, 

这三个点称为Spread Syntax，基本上是将data对象合并到我们新的{}空对象中，然后我们在注入后覆盖属性。

这个整体相当于写：

Object.assign(this.$data, () => {

  const data = { playerName: '', time: 0, errors: 0 }

  data.playerName = ...this.playerName

  return data

}())