Vuex 스토어에서 모든 인스턴스를 업데이트합니다. 현재 인스턴스만 업데이트하십시오.

Vuex 스토어에서 모든 인스턴스를 업데이트합니다. 현재 인스턴스만 업데이트하십시오.

사용자가 댓글을 좋아하거나 싫어할 수 있는 간단한 블로그 페이지를 만들고 있습니다.현재 문제는 사용자가 "add Like" 또는 "subtract Like" 메서드를 누를 때마다 현재 클릭 중인 댓글뿐만 아니라 모든 코멘트가 업데이트된다는 것입니다.

스토어:

export const state = () => ({
  comments: [
    {
      id: 1,
      likes: 0,
      name: 'amyrobson',
      img: '/img/avatars/image-amyrobson.png',
      post: `Impressive! Though it seems the drag feature could be improved.
              But overall it looks incredible. You've nailed the design and the
              responsiveness at various breakpoints works really well.`,
    },
  ],
})

export const mutations = {
  pushComment(state, comment) {
    state.comments.push(comment)
  },
  addLikes(state) {
    state.comments.forEach((element) => element.likes++)
  },
  subtractLikes(state) {
    state.comments.forEach((element) => element.likes--)
  },
}

컴포넌트:

 <button @click="addLike">
        <img src="/img/icon-plus.svg" />
      </button>

      <p class="py-3 text-primaryBlue">{{ comment.likes }}</p>

      <button
        @click="subtractLike">
        <img src="/img/icon-minus.svg" />
      </button>

<script>
export default {
  data() {
    return {
      reply: false,
    }
  },
  },
  methods: {
    addLike() {
      this.$store.commit('comments/addLikes')
    },
    subtractLike() {
      this.$store.commit('comments/subtractLikes')
    },
  },
}
</script>

아이디와 상관없이 모든 댓글에 대해 좋아요를 늘리기 때문입니다.특정 코멘트의 링크를 증가시키려면 코멘트를 식별하는 ID를 전달해야 합니다.이 식별자는 고유해야 합니다.이 경우, 이 식별자는id필드는 고유합니다.

다음으로 컴포넌트에서 다음 정보 비트(식별자)로 변환을 커밋해야 합니다.

<button @click="addLike(comment.id)">
  <img src="/img/icon-plus.svg" />
</button>

<p class="py-3 text-primaryBlue">{{ comment.likes }}</p>

<button @click="subtractLike(comment.id)">
  <img src="/img/icon-minus.svg" />
</button>

<script>
export default {
  data() {
    return {
      reply: false,
    }
  },
  },
  methods: {
    addLike(id) {
      this.$store.commit('comments/addLikes', id)
    },
    subtractLike(id) {
      this.$store.commit('comments/subtractLikes', id)
    },
  },
}
</script>

그런 다음 해당 식별자를 포함하도록 커밋 정의를 업데이트해야 합니다.이 식별자를 사용하여 다음 코멘트를 찾습니다.like증가/증가할 속성:

addLikes(state, id) {
  const foundComment = state.comments.find(comment => comment.id === id);
  if (foundComment) foundCommment.likes++;
},
subtractLikes(state, id) {
  const foundComment = state.comments.find(comment => comment.id === id);
  if (foundComment) foundCommment.likes--;
},

p/s: 어레이 내의 오브젝트는 참조에 의한 것임을 기억하십시오.foundComment에서의 원래 코멘트 오브젝트에 대한 참조일 뿐입니다.state.comments직접 변환할 수 있습니다.

언급URL : https://stackoverflow.com/questions/70685386/vuex-store-updating-all-instances-i-only-want-current-instance-updated