동일한 Vue 코드가 한 샌드박스에서 반응하지만 다른 샌드박스에서는 비활성화됨

동일한 Vue 코드가 한 샌드박스에서 반응하지만 다른 샌드박스에서는 비활성화됨

나는 내 문제에 대해 최소한의 재현 가능한 샌드박스를 준비하고 싶었다.이전 샌드박스를 포크하여 새로운 케이스와 무관한 코드를 삭제했습니다.그런데 한 기능이 작동을 멈췄는데 왜 그런지 모르겠어요.코드는 동일하며 console.log는 코드가 갱신되었음을 나타냅니다.1개의 샌드박스에서 동작하고 2번째 샌드박스에서 동작하지 않는 이유는 무엇입니까?

원래 샌드박스: 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);
}

댓글.표시하다

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

또 반응성을 잊었군요Vue를 사용합니다.에 새로운 지주를 설치하다comments스테이트 프롭:

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

언급URL : https://stackoverflow.com/questions/62903948/same-vue-code-is-reactive-in-one-sandbox-and-not-in-the-other