小编Gec*_*o29的帖子

我在我的应用程序中遇到了一些有关反应性的问题。

我有一个 Vuex 商店，其中有一个对象“歌曲”，其中包含“歌曲”对​​象，其中键是它们的 ID。对于其中的每个歌曲对象，我都有各种属性，有问题的属性是“播放”一个布尔值。

例如

songs = {
   2: {playing: false},
   7: {playing: true)
}

在我的应用程序中，我有一个列表，对所有这些歌曲使用 v-for，并通过一个按钮切换歌曲的播放属性。当按下按钮时，我会发送我创建的动作，传入与按下的按钮相关联的歌曲 ID

this.$store.dispatch('toggleSongPlaying', {songid: songid})

根据歌曲是否正在播放，我希望显示适当的图标。

我的问题的简化 vuex 商店包括以下内容：

const state = {
  songs: {}
};

const mutations = {
  update_song_playing(state, payload) {
     var songObj = state.songs[payload.songid]
     var playingBool = !songObj.playing
     Vue.set(songObj, 'playing', playingBool)
  }
};

const actions = {
  toggleSongPlaying({ commit }, payload) {
     commit("update_song_playing", payload)
  }
};

const getters = {
  getSongs: state => state.songs
};

设置功能工作正常，问题在于反应性。按下切换按钮时，不会发生图标更改。然而，触发重新渲染会导致图标发生变化。在我的组件中，我像这样使用 mapGetters：

computed: {
    ...mapGetters({ …