Старый и новый на часах, кажется, не работает

Question

Я работаю над алгоритмом динамической загрузки данных, в котором есть переменная состояния (VueX) loadState который управляет статусом данных, загружается ли он /loadinDone

loadState: {
    filters:"LOADING_DONE"
    criteria:"LOADING"
    otherDependency:"LOADING_DONE"
}

есть watch на loadState,

...
computed: {
    ...mapGetters([
        'loadState',
        'project'
    ])
}
...

watch: {
    loadState: {
        deep: true,
        handler: function (newValue, oldValue) {
            Object.keys(newValue).forEach((key) => {
                console.log(key, " : " ,newValue[key], oldValue[key])
            });
        }
    }
}

это всегда такие же значения, как, filters: LOADIN_DONE LOADING_DONE

Это моя мутация для обновления состояния загрузки,

mutations: {
    [UPDATE_LOAD_STATE]: function (state, payload) {
        let temp = state.loadState;
        temp[payload.name] = payload.state;
        Vue.set(state, 'loadState', temp);
        // Vue.set(state.loadState, payload.name, payload.state);
    }
}

Я также взял ссылку с: https://github.com/vuejs/vue/issues/1086

Но это не работает.

Я не понимаю, как я могу решить это.

Есть ли лучший способ сделать ожидающие вызовы после загрузки всех зависимостей, мы делаем определенный вызов данных.

Я знаю подход,

<div v-if="isFilterLoaded"></div>

но в Моем вызове мои зависимости могут быть динамическими, это может происходить из базы данных

Answer 1

Попробуйте поменять весь объект на новый.

mutations: {
    [UPDATE_LOAD_STATE]: function (state, {name, state}) {
        this.loadState = Object.assign({}, state.loadState, {[name]: state});
    }
}

Answer 2

Из предупреждения в Vue Docs для наблюдателя:

Примечание: при замене (а не замене) объекта или массива старое значение будет совпадать с новым значением, поскольку они ссылаются на один и тот же объект / массив. Vue не хранит копию значения перед изменением.

Таким образом, вы должны справиться с этим самостоятельно, сохранив копию oldValue в свойстве данных как:

    data() {
  oldLoadState: null
}
...

computed: {
    ...mapGetters([
        'loadState',
        'project'
    ])
}
...

created(){
  this.oldLoadState = this.loadState;
}
...
watch: {
    loadState: {
        deep: true,
        handler: function (newValue, oldValue) {
            Object.keys(newValue).forEach((key) => {
                console.log(key, " : " ,newValue[key], this.oldLoadState)
            });
            this.oldLoadState = newValue[key];
        }
    }
}

• мы сохраняем первоначальное значение loadState в свойстве данных oldLoadState

• ссылаться на это свойство данных oldLoadState в вашем наблюдателе, чтобы получить значение loadState до мутации

• установить oldLoadState для наблюдателя newValue сохранить предыдущее значение сохраненным