Vue.js：在点击时响应式更新组件

Question

我有一个组件，用于在收藏夹中添加/删除项目。它工作得很好，但用户看不到他/她是否将项目添加到收藏夹（如果项目被收藏，我会显示一个星形图标，如果不是，我会显示一个空图标）。我怎样才能被动地做到这一点？如果用户单击它，我希望我的图标更改其类别。

这是我的代码：

组件：

<template>
 <span :class="isFavorite
            ? 'mdi mdi-star favorite'
            : 'mdi mdi-star-outline'"
    class="favorite-item-icon"
    @click="isFavorite ? deleteFromFavoriteItems(itemId) : addToFavoriteItems(itemId)">
 </span>
</template>

<script>
 export default {
  import { mapGetters, mapActions } from 'vuex';

  props: ['itemId', 'isFavorite'],
  methods: {
    ...mapActions(['addToFavoriteItems', 'deleteFromFavoriteItems']),
  },
};
</script>

父组件的v-for列表中的组件：

...
 <favorite-label :itemId="item.id" :isFavorite="item.is_favourite" />
...

在我的店里：

addToFavoriteItems({ commit }, itemId) {
  http
    .post(`${config.api}api/v1/items/favourite-save`, {
      item_id: itemId,
    });
deleteFromFavoriteItems({ commit }, itemId) {
  http
    .post(`${config.api}api/v1/items/favourite-delete`, {
      item_id: itemId,
    });

Answer 1

您需要从服务器（更新后）将item 分配给商店，例如：

$post(..., { item_id: itemId }).then(function(response) {
  this.$store.commit('items/SET_ITEM', response.data)
})

items/SET_ITEM 突变循环当前数组中的项目并在 id 匹配时更新项目。

let itemToUpdate = this.items.forEach(function(i) {
  if (i.id === item.id) {
    i = item
  }
})

然后它应该正确地改变 store 调度 prop 更新并使用新的 isFavorite 计算重新渲染视图。

或者，如果可以使用您传递的itemId，则服务器没有理由更改任何内容，只需传递它，例如：

$post(..., { item_id: itemId }).then(function() {
  this.$store.commit('items/UPDATE_FAVORITE', { item: itemId })
})

现在您可以添加一个切换收藏夹的突变，基本上：

this.items.forEach(function(i) {
  if (i.id === item) {
      i.is_favorite = !i.is_favorite
  }
})