Question

我正在研究动态数据加载算法，其中有状态变量（VueX）loadState来管理数据的状态，无论是 loading / 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

来自watcher的vue文档中的警告：

注意：在变异（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。 Vue没有保留pre-mutate值的副本。

因此，您应该通过将oldValue的副本存储在data属性中来自行处理：

    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以保留之前的值

Answer 2

尝试用新的对象交换整个对象。

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

手表上的old和newVal似乎无法正常工作

2 个答案: