Vuex：当瞬间内的对象具有属性更改时，是否可以直接从 vue 瞬间改变状态对象？

Question

我正在使用 vue 和 vuex 来设置 Web 应用程序。在这个应用程序中，我想将一些用户可编辑的数据以包含可编辑属性的对象的形式存储到 vuex 状态中，即{firstname: "", lastname: ""}，但我被告知要尝试带走观察者以监视对象的变化，并以某种方式使应用程序能够将更改的对象存储到状态。

我试图从存储中获取状态并放入 vue 即时，让用户编辑绑定到对象属性的字段，即v-model:detail.firstname 其中detail 是从 vuex 存储中获取的对象。显然，当值发生变化时，控制台会显示“不要在突变之外改变存储数据”的错误。我明白这意味着什么，所以我后来做了这样的事情：

模板：

<input type="text" v-model="detail.firstname" />
<br />
<input type="text" v-model="detail.lastname" />

脚本：

data() {
  return {
    detail: {}
  }
},
created: function () {
  // initialize this.detail with Object.assign to clone from another object etc.
},
watch: {
  'detail': {
    handler: function (val) {
      debugger;
      this.setTabStorageItem({ key: "modifyingDetail", value: val });
    },
    deep: true
  }
}

我知道值的更改不应该因为突变而完成，所以我不会直接从 getter 引用 detail 并直接更改该对象。但正如我所说，我被告知尽量不要使用观察者来改变价值。但是，如果是这样，我能想到的唯一解决方案是直接从 getter 引用 detail，因此 v-model 将完成更改用户编辑时给定对象的属性的工作，并且问题回到变异状态。

有没有其他我可以尝试的解决方案，而不是使用 watcher？

我认为示例中还显示了另一个问题，它总是用一个新对象替换整个对象。听起来这会给页面带来不必要的加载，因为所有状态更改都使用一个新对象。 （请原谅我没有将其包含在标题/另一个问题中）解决此问题可能会导致告诉我不要使用观察者的人，同意使用观察者。或者如果真的没有其他选择，他们只会告诉我无论如何都要使用它。

Answer 1

我不确定我是否完全理解您的意思，但根据我的理解，您想要做的是允许用户编辑值、名字和姓氏

我愿意

data(){
 return{
  detail:{
    firstname: this.$store.getters['getUser'].firstname,
    lastname: this.$store.getters['getUser'].lastname
  }
 }
}

通过watcher观察细节变化

watch:{
  'detail.firstname': function(val){
    this.changeHandler()
  }
  'detail.lastname':function(val){
     this.changeHandler()
   }
}

如果您不关心与数据库同步，您可以提交（''）每个数据更改

  methods:{
      changeHandler: function(){
         this.$store.commit('changeUser', {firstname: this.detail.firstname, 
                                           lastname: this.detail.lastname})
      }
    }

我什至不知道为什么您要关注每个更改，而不是在用户单击某个提交按钮并在数据库中更改它并将详细信息设置为最新值后更改详细信息