vue中使用vuex管理各种状态

要使用vuex首先得安装然后引入,在项目的src目录下建立store文件夹，分别新建state,js,mutation.js,index.js.getter.js,actions.js

state.js,存储了组件之间需要共享的变量:

import {
  playMode
} from '@/utils/config.js'
const state = {
  // 歌手信息：
  singer: {},
  // 是否正在播放音乐
  playing: false,
  // 播放器展开或者收起:
  fullScreen: false,
  // 播放的列表：
  playList: [],
  // 顺序列表
  sequenceList: [],
  // 播放模式：
  mode: playMode.sequence,
  // 当前播放歌曲的索引：
  currentIndex: -1
}
export default state

 其中播放模式可以从外部引用，方便语义化的管理 config.js:

// 配置文件：

// 播放模式：
export const playMode = {
  // 顺序播放：
  sequence: 0,
  // 循环播放：
  loop: 0,
  //   随机播放：
  random: 2
}

　mutations.js定义了修改state的方法

const matutaions = {
  SET_SINGER(state, singer) {
    state.singer = singer
  },
  SET_PLAYING_STATE(state, flag) {
    state.playing = flag
  },
  SET_FULL_SCREEN(state, flag) {
    state.fullScreen = flag
  },
  SET_PLAYLIST(state, list) {
    state.playList = list
  },
  SET_SEQUENCE_LIST(state, list) {
    state.sequenceList = list
  },
  SET_PLAY_MODE(state, mode) {
    state.mode = mode
  },
  SET_CURRENT_INDEX(state, index) {
    state.currentIndex = index
  }
}
export default matutaions

　getters.js类似于组件中computed，可以对mutations的数据再处理，也可以直接拿到state的数据

// 重新包装一下方便直接从组件中拿到数据
export const singer = state => state.singer

export const playing = state => state.playing

export const fullScreen = state => state.fullScreen

export const playList = state => state.playList

export const sequenceList = state => state.sequenceList

export const mode = state => state.mode

export const currentIndex = state => state.currentIndex

// 获取当前播放歌曲
export const currentSong = (state) => {
  return state.playList[state.currentIndex] || {}
}

actions可以同时提交多个mutations,一些异步方法也可以在这里使用

// 同时操纵多个mutation可以使用actions;

// 封装多个mutations:
export const selectPlay = function ({
  commit,
  state
}, {
  list,
  index
}) {
  console.log(state);

  commit('SET_SEQUENCE_LIST', list)
  commit('SET_PLAYLIST', list)
  commit('SET_CURRENT_INDEX', index)
  commit('SET_FULL_SCREEN', true)
  commit('SET_PLAYING_STATE', true)
}

在歌手列表页点击歌手之后需要跳转到歌手详情，同时需要把歌手信息传递进去，方法一可以用参数传递的方式，方法二传递歌手ID直接再歌手详情页面，重新获取数据，方法三可以直接使用 vuex

在这里使用vuex，因为要改变state,所以引入 mapMutations,

先引入mapMutations

import { mapMutations } from "vuex";

methods中展开mutations,SET_SINGER为mutations中的方法名

    ...mapMutations({
      setSinger: "SET_SINGER"
    })

 点击事件传递item给mutation 

this.setSinger(item); 传递item

    Todetail(item) {
      // console.log(item);
      this.$router.push({
        path: `/singer/${item.id}`
      });
      // 实际调用了this.$store.commit('setSinger',item)....
      this.setSinger(item);
    },　　

 歌手详情页的头部需要用到vuex中保存的歌手信息

 

 

 在singer-detail组件中的computed方法中定义getters:

import { mapGetters } from "vuex";

　

    ...mapGetters(["singer"]),
    title() {
      return this.singer.name;
    },
    bgImage() {
      return this.singer.avatar;
    }

 因为这个音乐列表在其他歌单列表也会用到，所以抽象成组件，把参数作为props传递进去

前面因为传递了歌手id，所以可以根据这个id去获取该歌手的top50首歌

      const { artist, hotSongs } = await getSingerMusic(this.singer.id);
      // 歌手信息
      this.artistInfo = artist;
      // 热门歌曲
      this.hotSongs = hotSongs;

 解构出的artist保存着歌手更全的信息

 

 

 

 

 

    

hotSongs保存着那50首歌曲的信息

　　

 

 

   这同样是没法用的，所以也需要一个格式化函数获取需要的数据

需要的是歌曲id，歌单id，唱这首歌的全部歌手，姓名（主唱），专辑，播放时长，图片

在common文件夹中新建一个song.js

歌曲的播放地址需要通过id发送请求再获得

//获取歌曲播放地址
export const getsongUrl = p => get(`/song/url`, p)

song.js中引入

import {
  getsongUrl,
} from "@/request/api.js";

歌手可能有多个所以准备一个转换函数把数组转换成‘/’分割的字符串

function filterSinger(singer) {
  let ret = [];
  if (!singer) {
    return ''
  }
  singer.forEach((s) => {
    ret.push(s.name)
  })
  return ret.join('/')
}　　

定义一个构造函数

export default class Song {
  constructor({
    id,
    mid,
    singer,
    name,
    album,
    duration,
    image,

  }) {
    this.id = id;
    this.mid = mid;
    this.singer = singer;
    this.name = name;
    this.album = album;
    this.duration = duration;
    this.image = image;
    getsongUrl({
      id: this.id
    }).then(res => {
      // console.log(res.data[0]);
      this.url = res.data[0].url
    })
  }
}

　导出一个歌曲生成的构造函数，参数是全部数据的data，根据参数返回需要的结果

export function createSong(musicData) {
  return new Song({
    id: musicData.id,
    mid: musicData.al.id,
    singer: filterSinger(musicData.ar),
    duration: musicData.duration ? musicData.duration : musicData.dt ? musicData.dt : '',
    name: musicData.name,
    album: musicData.al.name,
    image: musicData.al.picUrl + '?param=300y300',
    url: musicData.id
  })
}　　

回到singer-detail，引入这个函数

import { createSong } from "@/common/song";

 定义格式化函数，在执行函数时确保id存在

    _normalizeSongs(list) {
      let ret = [];
      list.forEach(item => {
        // console.log(item);
        if (item.id && item.al.id) {
          ret.push(createSong(item));
        }
      });
      return ret;
    }　　

使用该函数

      // 热门歌曲
      this.songs = this._normalizeSongs(hotSongs);
      console.log(this.songs);

 可以看到那50首歌都格式化好了

 

 

 

  最后把数据给子组件就好了

  <music-list :songs="songs" :bg-image="bgImage" :title="title"></music-list>