如何正确地将值添加到 Vue 存储中并将其删除(如果它已经存在)？

Question

假设我们想在 Vue 存储中的 "favorites" 添加一个值：

• 如果它已经存在，请删除
• 否则添加

我知道下面的代码可能既不是正确的方法也不是最佳方法，所以我想知道什么是正确的方法？

元件：

---

item是一个对象，例如：

{ "value": false, "name": "Program Files", "path": "C:\Program Files", "stat": { "dev": 1990771843, "mode": 16676, "nlink": 1, "uid": 0, "gid": 0, "rdev": 0, "ino": 10133099161787836, "size": 0, "atimeMs": 1520444327295.1216, "mtimeMs": 1520444327295.1216, "ctimeMs": 1520444327295.1216, "birthtimeMs": 1506692793335.212, "atime": "2018-03-07T17:38:47.295Z", "mtime": "2018-03-07T17:38:47.295Z", "ctime": "2018-03-07T17:38:47.295Z", "birthtime": "2017-09-29T13:46:33.335Z" } }

---

<v-btn @click="addToFavorites(item)">
  <!-- Displaying needed icon depending on state -->
  <v-icon v-if="inFavorites(item)">fa-bookmark</v-icon>
  <v-icon v-else>far fa-bookmark</v-icon>
</v-btn>
...
computed: {
  inFavorites(item) {
    let favorited = this.$store.state.AppData.favorites.includes(item)
    return favorited ? 'true' : 'false'
  }
},
methods: {
  addToFavorites(item) {
    let favorited = this.$store.state.AppData.favorites.includes(item)
    if (!favorited) {
      this.$store.commit('addToFavorites', item)
    } else {
      this.$store.commit('removeFromFavorites', item)
  }
}

商店：

const state = {
  favorites: []
}
const mutations = {
  addToFavorites (state, favorites) {
    state.favorites = favorites
  },
  removeFromFavorites (state, favorites) {
    state.favorites.find(favorites).splice(favorites)
  }
}
...

Answer 1

你需要

在state.favorites数组中找到item的位置，然后按位置将其删除。

棘手的部分是找到位置，但您似乎已经在 includes 方法中具有此逻辑：

this.$store.state.AppData.favorites.includes(item)

因此，考虑到它有效，您的removeFromFavorites突变将是：

  removeFromFavorites (state, item) {
    var itemIndex = state.favorites.indexOf(item);
    state.favorites.splice(itemIndex, 1);
  }

使用唯一属性(例如 path ( 以确定是否收藏

而不是：

let favorited = this.$store.state.AppData.favorites.includes(item)

做：

let favorited = !!this.$store.state.AppData.favorites.find((i) => i.path === item.path);

并且，代替：

  removeFromFavorites (state, item) {
    var itemIndex = state.favorites.indexOf(item);
    state.favorites.splice(itemIndex, 1);
  }

做：

  removeFromFavorites (state, item) {
    var itemIndex = state.favorites.findIndex((i) => i.path === item.path);
    state.favorites.splice(itemIndex, 1);
  }

Answer 2

我设法让它使用以下代码工作，虽然我不确定这是否是最好的方法，但肯定有更好的方法可以做到这一点：

更新

<v-btn @click="addToFavorites(item)">
  <!-- Displaying needed icon depending on state -->
  <v-icon v-if="inFavorites(item)">fa-bookmark</v-icon>
  <v-icon v-else>far fa-bookmark</v-icon>
</v-btn>
...
methods: {
  addToFavorites(item) {
    let favorited = this.$store.state.AppData.favorites.find((i) => i.path === item.path)
    favorited
      ? this.$store.commit('removeFromFavorites', selectedItem)
      : this.$store.commit('addToFavorites', selectedItem)
  },
  inFavorites(item) {
    let favorited = this.$store.state.AppData.favorites.find((i) => i.path === item.path)
    return favorited ? true : false
  }
}

商店：

const state = {
  favorites: []
}
const mutations = {
  addToFavorites (state, item) {
    state.favorites.push(item)
  },
  removeFromFavorites (state, item) {
    var itemIndex = state.favorites.findIndex((i) => i.path === item.path)
    state.favorites.splice(itemIndex, 1)
  }
}
...