Question

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

我试图从存储中获取状态并放入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可以完成更改用户编辑时给定对象的属性的工作，而问题又回到了突变状态突变。

是否可以尝试其他解决方案，而不使用观察器？

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

Answer 1

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

我会

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

对于每个数据更改，如果您不关心与数据库同步，都可以commit（''）

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

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

Vuex：当即时对象中的对象发生属性更改时，是否有直接从vue实例中突变状态对象的方法？

1 个答案: