Vuex: есть ли в любом случае мутировать объект состояния из момента vue непосредственно, когда объект в этом моменте имеет изменение свойства?

Question

Я использую vue с vuex для настройки веб-приложения.В этом приложении я хотел бы сохранить некоторые редактируемые пользователем данные в состоянии 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
  }
}

Я знаю, что изменение значений не должносделано из мутации, так что я не собираюсь ссылаться на detail напрямую из геттера и изменять этот объект напрямую.Но, как я уже сказал, мне сказали не использовать наблюдателя для изменения значения.Но если так, то единственным решением, о котором я мог подумать, была бы ссылка на detail непосредственно из getter, так что v-модель сделала бы работу по изменению свойств объекта, заданного, когда пользователь редактирует, и проблема возвращается в состояние мутации из-за мутации.

Есть ли какое-нибудь другое решение, которое я мог бы попробовать, не используя watcher?

И я думаю, что в этом примере показана еще одна проблема: она всегда заменяет весь объект новым.Это звучит так, как будто это создаст ненужную загрузку на страницу, потому что все изменения состояния используют новый объект.(и простите за то, что я не включил это в заголовок / в другой вопрос) Решение этого может привести к тому, что тот, кто сказал мне не использовать watcher, согласен с использованием watcher.Или, если на самом деле нет других вариантов, они просто сказали бы мне использовать его в любом случае.

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

для каждого изменения данных, которое вы можете зафиксировать (''), если вам не нужна синхронизация с базой данных

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

Я даже не уверен, почему вы захотите следить за каждым изменением, а не менять детали после того, как пользователь нажал какую-нибудь кнопку отправки и изменил ее в базе данных и установил детализацию в соответствии с последними значениями