相同的 Vue 代码在一个沙箱中是响应式的，而不是在另一个沙箱中答案

【问题标题】：Same Vue code is reactive in one sandbox and not in the other相同的 Vue 代码在一个沙箱中是响应式的，而不是在另一个沙箱中
【发布时间】：2020-11-04 07:22:23
【问题描述】：

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

原始沙盒：https://codesandbox.io/s/frosty-taussig-v8u4b 尝试点击一些带有数字的按钮，它会立即增加。

最小化沙盒：https://codesandbox.io/s/nervous-breeze-ejznz。如果您单击带有数字的按钮，则在重新加载屏幕之前不会发生任何事情。

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

变异：

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

评论.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
  });
},

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

你又忘记了反应性。使用 Vue.set 在 comments 状态 prop 中设置新的 prop：

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

而不是

  state.comments[comment._id] = comment;

【讨论】：

你能解释一下为什么原来的沙箱不需要它吗？这让我很困惑。一个例子有效，第二个无效。我不明白其中的区别。它应该在任何地方都以相同的方式运行，不是吗？
你的整个评论没有反应，所以它的道具更新也没有反应
好的，我去看看原来的沙盒，在这里写新的评论，
在原始沙箱中，您将 up 和 down 存储在反应性 data 部分中，这就是反应性起作用的原因。从模板中删除 {{ mutableUpvotes }} 和 {{ mutableDownvotes }} ，反应将停止工作，就像在最小化的沙箱中一样。
你是对的，它停止工作了。我的真实代码适用于 {{ comment.down }}。是因为我在其他计算属性中使用了注释吗？我在缩小的沙箱中进行了尝试，它有部分帮助。我可以对第一级线程进行投票，并且数量正在增加。但这对回复没有影响。这是我最初想要解决的问题。

【解决方案2】：

终于成功了。诀窍是：

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

【讨论】：