如何检测传递给vuex状态的vue数据并检查它答案

【问题标题】：how to detect vue data passed to vuex state and check for it如何检测传递给vuex状态的vue数据并检查它
【发布时间】：2019-04-04 12:22:14
【问题描述】：

我正在制作一个播放列表，并使用 vuex 将我的歌曲添加到其中，这没问题。但我不知道如何检测它，如果这些数据添加到状态？

这是我的 vuex：

export const state = () => ({
  playlist: []

});

export const mutations = {
  addToPlaylist(state, val) {
    state.playlist.push(val);
  }
};

export const getters = {
  playlistItems: state => state.playlist
};

我在创建的钩子中得到这样的播放列表项：

 this.playlist = this.$store.getters.playlistItems;
      this.$store.watch(
        (state) => {
          return this.$store.getters.playlistItems
        },
        (val) => {
          this.playlist = val;
        }
      )

这些代码有效，没有问题，但我不知道如何检测它。

我的数据是这样的：

musics: [
          {
            id: 1,
            cover: require('~/assets/images/cover/music/ali_zand_vakili_jadeh_shab.jpg'),
            title: 'جاده شب',
            artist: 'علی زند وکیلی',
            source: 'http://media.mtvpersian.net/2019/Mar/21/Ali%20Zand%20Vakili%20-%20Jadeh%20Shab.mp3'
          },
          {
            id: 2,
            cover: require('~/assets/images/cover/music/amin_hayaei_divoone_misazi.jpg'),
            title: 'دیوونه میسازی',
            artist: 'امین حیایی',
            source: 'https://cdnmrtehran.ir/media/mp3s_128/Amin_Hayaei/Singles/amin_hayaei_divoone_misazi.mp3'
          },
        ],

如果为所有项目添加或不添加此数据，我想更改图标每个项目都有图标

谢谢

【问题讨论】：

一旦你得到了itens的列表并且你有一个项目，你可以创建一个方法来测试像includes或find这样的东西，例如调用isInList(item)并返回一个布尔值，对吗？
@MatheusValenza 你能给我举个例子吗？我很困惑

标签： vue.js vuex nuxt.js

【解决方案1】：

您只需创建一个函数来检查列表中是否已选择带有 id 的音乐。

isAlreadyAdded(id, arr) {
  let is_in = false;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i].id === id) {
       is_in = true;
       break;
    }
  }
  return is_in;
}

【讨论】：