Vuejs 需要多次观看 bool

Question

我正在使用 VueJs，我需要多次观察一个布尔值，当它为真时，执行一个动作。我发现当当前值更改为相同值（https://github.com/vuejs/vue/issues/1302）时，手表不会触发。

目前，我只是在每个可以更改值的操作之前将 bool 设置为 false，并且在我的手表中，我有一个 if 来检查 bool 是否为真。有人知道更好的方法吗？

watch: {
  '$store.state.recommandationModule.recommandationSetCorrectly': function (val) {
    if (val) {
      // Do action
    }
  }
}

Answer 1

当您为反应项分配与它已有的相同值时，不会发生任何事件。你需要做一些事情来完成这些任务。

您可以为此使用settable computed。每当您尝试为变量分配值时，都会调用它。您只需要确保设置您的计算变量，而不是它所基于的存储变量。

new Vue({
  el: '#app',
  data: {
    storeStateMock: true,
    trueCount: 0,
    changeCount: 0
  },
  computed: {
    recommendationSetCorrectly: {
      get() { return this.storeStateMock; },
      set(v) {
        if (v) { ++this.trueCount; }
        this.storeStateMock = v;
      }
    }
  },
  watch: {
    recommendationSetCorrectly() {
      ++this.changeCount;
    }
  },
  created() {
    setInterval(() => {
      this.recommendationSetCorrectly = Math.random() > 0.5;
    }, 1200);
  }
});

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  {{ recommendationSetCorrectly }} {{ trueCount }} {{ changeCount }}
</div>

您还可以将trueCount 项目添加到您的$store，并在设置布尔值的突变中增加它。那你就可以看trueCount了。