Javascript 相同的Vue代码在一个沙箱中是被动的，而在另一个沙箱中不是被动的

我想为我的问题准备最小的可复制沙盒。我分叉了我以前的沙箱，删除了与新案例无关的代码。但是有一个功能停止工作了，我不知道为什么。代码看起来相同，console.log显示代码已更新。为什么它在一个沙箱中工作而在第二个沙箱中不工作

原始沙盒：尝试单击一些带有数字的按钮，它会立即递增

最小化沙盒：。如果您单击带有数字的按钮，则在重新加载屏幕之前不会发生任何事情

我想了解这种行为。我看不出同一源代码行为不同的原因

突变：

SET_VOTE: (state, payload) => {
  console.log("SET_VOTE");
  const { commentId, vote } = payload;
  const comment = state.comments[commentId];
  if (vote === 1) {
    comment.up += 1;
  } else {
    comment.down += 1;
  }
  console.log(comment);
}

行动：

COMMENT_VOTE: async (context, payload) => {
  console.log("COMMENT_VOTE", payload);
  const mutation = {
    commentId: payload.commentId,
    vote: payload.vote
  };
  context.commit("SET_VOTE", mutation);
}

Comment.vue

<b-button v-on:click="upvote" class="mr-1">
  {{ comment.up }}
</b-button>

async upvote() {
  await this.$store.dispatch("COMMENT_VOTE", {
    vote: 1,
    commentId: this.comment._id
  });
},

{{comment.up}
异步upvote（）{
等待。$store.dispatch（“评论投票”{
表决：1，
commentId:此。注释。\u id
});
},

---

您又忘记了反应性。使用Vue.set在

注释

状态道具中设置新道具：

  Vue.set(state.comments, comment._id, comment);

而不是

  state.comments[comment._id] = comment;

---

它终于起作用了。诀窍是：

data() {
  return {
    commentVotes: this.comment.votes,
  };
computed: {
  upvotes() {
    return this.commentVotes.filter(vote => vote.vote === 1);
  },
  downvotes() {
    return this.commentVotes.filter(vote => vote.vote === -1);
  },

---

你能解释一下为什么原始沙箱中不需要它吗？这让我很困惑。一个例子行得通，第二个不行。我不明白其中的区别。它在任何地方的行为都应该是一样的，不是吗？你的整个评论都不是反应性的，所以这就是为什么它的道具更新也不是反应性的好吧，我；我们将查看原始沙盒，并在此处写一条新注释，在原始沙盒中，您将

向上

和

向下

存储在反应性

数据

部分，这就是反应性起作用的原因。从模板中删除{mutableUpVoces}和{{mutableDownVoces}}}，反应性将停止工作，就像最小化沙箱中一样。你是对的，它停止了工作。我的真实代码使用{{comment.down}}。是因为我在其他计算属性中使用了注释吗？我在缩小的沙箱里试了试，它起了部分作用。我可以在第一级线程上投票，而且数量正在增加。但这对回复没有影响。这是我最初想要解决的问题。