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

我有在单击后更改VuEx状态的组件列表。
我想呈现两个VuEx状态值之间的差异：从单击处理程序调度的操作之前和之后。
可能是这样的：

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

但问题是，这段代码产生无限的呈现循环，因为动作分派更改了Vuex存储和Vuex反应性
进而触发应用程序组件重新提交。
有没有可能比分派操作、获取新值、分派撤消操作和启用反应性更禁用Vuex反应性？如果是的话，它可以解决我的问题。

最佳答案

这是未经测试的，但我的想法是让difference从iife（立即调用的函数表达式）返回它的功能，然后添加一个标志，以确定它是否已被调度。

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;
  }
})()

关于javascript - 如何在不触发 react 性的情况下计算Vuex状态差异，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54925852/