如何正确地将值添加到Vue商店并删除它已经存在？

Question

假设我们想在Vue商店中为“收藏夹”添加一个值：

• 如果已经有REMOVE
• 否则ADD

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

成分：

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

您需要在import {Observable} from 'rxjs'; function getComments(params) { return Observable.throw(params); } const params = 'abc'; Observable.of(null) .switchMap(_ => { return getComments(params) .map(data => ({ loading: false, data })) .catch(err => { console.log('debugging here', err); return Observable.empty(); }); }) .subscribe( console.log, error => console.error('This method is not called since the error is already caught', error), () => console.log('DONE') ) 数组中找到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);
  }

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)
  }
}

...