0

我正在研究动态数据加载算法，其中有状态变量（VueX）loadState来管理数据的状态，无论是加载/加载完成 

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>

但在我的电话中，我的依赖关系可以是动态的，它可能来自数据库

4

2 回答 2

0

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

mutations: {
    [UPDATE_LOAD_STATE]: function (state, {name, state}) {
        this.loadState = Object.assign({}, state.loadState, {[name]: state});
    }
}
于 2018-04-03T11:44:57.853 回答
0

从 vue docs for watcher中的警告：

注意：当改变（而不是替换）对象或数组时，旧值将与新值相同，因为它们引用相同的对象/数组。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在 data 属性中oldLoadState

  • 在您的观察者中引用此数据属性oldLoadState以获取loadState突变前的值

  • 将 设置oldLoadState为观察者newValue以保留先前的值

于 2018-04-03T11:18:43.757 回答