Vue.js“监视”不会触发简单的布尔值更改

Question

“观察”事件未在Vuex商店中触发。这是非常基本的。它并不比帮助中的示例复杂。看不在商店里工作吗？

（我能找到的所有答案都与Angular有关。）

-谢谢

在store.js

state: {
    warningSwitch : false,
}

(...)

watch: {
    warningSwitch: function (newState, oldState) {
        /* console.log(" Triggered "); */
        if(newState){
            this.showWarningNotice({title: "Oops", text:"Connection Lost"});
            return;
        } else {
            this.showInfoNotice({title: "Whew...", text:"Connected"});
        }
    }
},

(...)
mutations: {
    setWarningOn(state) {
        state.warningSwitchCounter++;
        state.warningSwitch = true;
    },
}

Answer 1

正如伯特在评论中提到的那样，商店中没有“看”这样的东西。

根据您的需求和架构，您可以采用两种不同的方法来模拟此行为。

一，您可以在组件中观察商店的吸气剂并在那里回复：

watch: {
    `$store.getters.warningSwitch`: function (newState, oldState) {
        /* console.log(" Triggered "); */
        if(newState){
            this.showWarningNotice({title: "Oops", text:"Connection Lost"});
            return;
        } else {
            this.showInfoNotice({title: "Whew...", text:"Connected"});
        }
    }
},

二，您实际上可以在商店的操作中调度其他行为：

actions: {
    setWarningOn: function(context, newState) {
        // broadcast event here or commit another mutation   
    }
}