Vue.js "Watch" 不触发简单的布尔值更改

Question

"Watch" 事件未在 Vuex 商店中触发。这是非常基本的。它并不比帮助中的示例复杂。 Watch 不能在商店使用吗？

（我能找到的所有答案都是关于 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" 这样的东西。

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

其一，您可以在您的组件中查看商店的 getter 并在那里响应它：

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"});
        }
    }
},

二，实际上你可以在 store 的 action 中调度额外的行为：

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

Vue.js "Watch" 不触发简单的布尔值更改

Vue.js "Watch" not firing on simple boolean value change

javascript

vue.js

vuejs2

vuex