如何正确地将一个值添加到 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

你需要找到item在state.favorites数组中的位置，然后按位置删除它。

棘手的部分是找到位置，但您似乎已经在 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)
  }
}

...

如何正确地将一个值添加到 Vue 存储中并在它已经存在的情况下将其删除？

How to properly add a value into Vue store and remove it if it's already there?

vue.js

vuejs2

vuex

组件：

商店：

使用唯一的属性（例如 `path`）来确定是否已收藏

已更新

商店：

如何正确地将一个值添加到 Vue 存储中并在它已经存在的情况下将其删除？

How to properly add a value into Vue store and remove it if it's already there?

vue.js

vuejs2

vuex

组件：

商店：

使用唯一的 属性（例如 path）来确定是否已收藏

已更新

商店：

使用唯一的属性（例如 `path`）来确定是否已收藏