계산된 속성을 통해 Vuex 상태 변경에 대한 구성 요소 업데이트

계산된 속성을 통해 Vuex 상태 변경에 대한 구성 요소 업데이트

나는 Vue와 Vuex를 이용하여 간단한 영화 앱을 만들고 있는데 버튼을 클릭했을 때 영화를 즐겨찾기 목록에 추가할 수 있기를 원한다.영화를 매장에 추가하는 중인데 영화가 추가되면 버튼의 텍스트가 '즐겨찾기에 추가'에서 '즐겨찾기에서 제거'로 바뀌었으면 좋겠어.나는 Vuex 스토어를 읽기 위해 계산된 속성을 사용해서 영화가 스토어의 즐겨찾기 목록에 있는지 여부에 따라 버튼의 텍스트를 결정한다.페이지를 다시 로드하면 버튼의 텍스트가 올바르게 변경되지만 동영상을 추가/제거하기 위해 버튼을 클릭해도 텍스트가 변경되지 않는다.Vuex 스토어의 변경에 대해 계산된 속성을 다시 계산하도록 하려면 어떻게 해야 하는가?

다음은 내 영화 구성 요소:

<template>
  <div class="single-movie-page">
    <img class="movie-img" :src="movie.img"></img>
    <div class="single-movie-info">
      <h1>{{movie.title}}</h1>
      <h3>Rating: {{movie.stars}}</h3>
      <h3>Released Date: {{movie.releaseDate}}</h3>
      <p>{{movie.overview}}</p>
      <button v-on:click="addRemoveFavourites" >{{ favourite }}</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['movie'],
  computed: {
    favourite() {
      return this.$store.state.favourites[this.movie.id] === undefined
        ? 'Add to Favourites'
        : 'Remove from Favourites'
    }
  },
  methods: {
    addRemoveFavourites() {
      this.$store.commit('changeFavourites', this.movie)
    }
  }
}
</script>

그리고 여기 내 Vuex 가게가 있다.

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    favourites: {}
  },
  mutations: {
    changeFavourites: (state, movie) => {
      if (state.favourites[movie.id]) {
        delete state.favourites[movie.id]
      } else state.favourites[movie.id] = movie
    }
  }
})

나는 사용하려고 노력했다.this.$forceUpdate()addRemoveFavourites 메서드에서 그러나 이것도 작동하지 않았다.

버트는 정답이 있어, 당신은 보통 물체에 속성을 추가하거나 제거할 수 없으며, 부에즈에서 반응하도록 할 수 없다.

사용할 필요가 있음Vue.set그리고Vue.delete반응하길 바란다면 말이야

그래서 너의 돌연변이는 이렇게 보여야 한다.

mutations: {
  changeFavourites: (state, movie) => {
    if (state.favourites[movie.id]) {
      Vue.delete(state.favourites, movie.id)
    } else {
      Vue.set(state.favourites, movie.id, movie)
    }
  }
}

참조URL: https://stackoverflow.com/questions/49240444/update-component-on-vuex-state-change-through-computed-properties