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

正如伯特（Bert）在評論中所暗示的，商店中沒有“手表”之類的東西。

您可以采用兩種不同的方法來模擬此行為，具體取決於您的需求和體系結構。

第一，您可以在組件中觀察商店的吸氣劑並在其中進行響應：

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   
    }
}