通过计算的属性更新Vuex状态更改上的组件

Question

我正在使用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方法中使用，但这也不起作用。

Answer 1

伯特（Bert）有正确的答案，您通常无法在对象中添加/删除属性并使它们在Vuejs中具有反应性。

您需要使用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)
    }
  }
}