如何检测传递到vuex状态的vue数据并进行检查

时间:2019-04-04 12:22:14

标签: vue.js vuex nuxt.js

我正在制作一个播放列表,并使用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'
          },
        ],

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

谢谢

1 个答案:

答案 0 :(得分:0)

您只需提供一个功能,即可检查列表中是否已存在具有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;
}