Vue: Как правильно обновлять свойства в реквизитах

Question

Я создаю компонент, который обновляет реквизиты со значениями из локального хранилища. Реквизиты - это объекты с несколькими логическими свойствами (например, this.globalStates.repeat = false ). Поскольку у меня есть более одного реквизита для обновления, я создал метод для любого реквизита в качестве аргумента:

  mounted(){
    this.loadLocalData(this.globalStates, "states")
    this.loadLocalData(this.globalSettings, "settings")
  },

  methods: {

    loadLocalData(object, localVariable){ // 'object' receives a prop, 'localVariable' must refer to a string in localStorage (localStorage stores strings only).
      const loadedObject = JSON.parse(localStorage.getItem(localVariable)) // Turn localStorage string into JSON object

      if (loadedObject && typeof loadedObject === "object"){

        for (let item in object){ // iterate through the prop and update each property with the one in loadedObject
          object[item] = loadedObject[item] // Why does this work!?
        }
      }
    }
  },

Теперь это действительно работает, без ошибок и предупреждений. Хотя я не понимаю почему. Обычно, когда я пытаюсь изменить реквизит напрямую, Vue выдает мне предупреждение:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.

Вместо object[item] = loadedObject[item] я попробовал следующее, но на самом деле это не удалось:

const u = 'update:' + object + '.' + item
this.$emit(u, loadedObject[item] )

Как правильно это сделать?

Answer 1

Правильный способ - не синхронизировать объекты, поскольку синхронизация не поддерживает это: https://github.com/vuejs/vue/issues/6241

Альтернативные решения:

1. Поместите метод в родительский

2. Синхронизируйте каждое свойство как отдельный объект

3. Использовать хранилище данных: https://vuejs.org/v2/guide/state-management.html