Vuex：当vue瞬间中的对象发生属性更改时，是否可以直接从vue瞬间变异状态对象？

Question

我正在使用vue和vuex来设置web应用程序。在此应用程序中，我希望以包含可编辑属性的对象形式将一些用户可编辑数据存储到vuex状态，即{firstname:，lastname:：}，但是有人告诉我，试着去掉监视对象变化的监视程序，让应用程序能够将变化的对象存储到状态。

我已尝试从存储中获取状态，并将其放入vue instant，让用户编辑绑定到对象属性的字段，即v-model:detail。firstname其中详细信息是从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，直接更改该对象。但正如我所说的，我被告知不要使用watcher进行值更改。但如果是这样的话，我能想到的唯一解决方案就是直接从getter引用细节，这样v-model就可以在用户编辑时更改给定对象的属性，而问题又回到变异状态。

有没有其他的解决方案，我可以尝试，不使用观察者？

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

Answer 1

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

我愿意

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

通过观察者观察细节的变化

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})
      }
    }

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