javascript - 如何在不触发 react 性的情况下计算 Vuex 状态差异

Question

我有点击后改变 Vuex 状态的组件列表。 我想呈现两个 Vuex 状态值之间的差异:从点击处理程序调度的 Action 之前和之后。

可能是这样的:

<template>
<ul>
  <li v-for="item of items" @click="clickItem">{{difference}}</li>
</ul>
</template>
<script>
    export default {
        methods: {
              difference() {
                  let oldValue = this.$store.getters.getValue();
                  this.$store.dispatch(SOME_ACTION);
                  let newValue = this.$store.getters.getValue();
                  this.$store.dispatch(UNDO_SOME_CATION);
                  return newValue-oldValue;
              }
              clickItem() {
                  this.$store.dispatch(SOME_ACTION);
              }
        }
    }
</script>

但问题是这段代码会产生无限渲染循环，因为 Action 调度会改变 Vuex 存储和 Vuex react 性 进而触发应用程序组件重新呈现。

是否有可能禁用 Vuex react 性而不是分派(dispatch)操作，获取新值，而不是分派(dispatch)撤消操作并启用 react 性？如果是，它可以解决我的问题。

Answer 1

这是未经测试的，但我的想法是让 difference 从 IIFE(立即调用的函数表达式)返回它的功能，然后添加一个标志以指示它是否已被分派(dispatch)。

const difference = (function() {
  let dispatched;

  return function() {
    if (dispatched) {
      dispatched = false;
      return;
    }

    let oldValue = this.$store.getters.getValue();
    this.$store.dispatch(SOME_ACTION);
    dispatched = true;

    let newValue = this.$store.getters.getValue();
    this.$store.dispatch(UNDO_SOME_CATION);
    return newValue-oldValue;
  }
})()