关于VUEX设置

0x01 目录视图

1.新建store文件夹并创建以下文件

image.png

0x02 store各文件设置

1.actions.js（函数外部接口）

const actions = {
  asnycSetListInfoId: ({commit}, id) => commit('SETLISTINFOID', id),
  asnycSetSongInfoId: ({commit}, id) => commit('SETSONGINFOID', id),
  asnycSetSongHref: ({commit}, hrefInfo) => commit('SETSONGHREF', hrefInfo),
  asnycSetCurrentTime: ({commit}, currentTime) => commit('SETCURRENTTIME', currentTime),
  asnycSetPlayFlag: ({commit}, flag) => commit('SETPLAYFLAG', flag),
  asyncSetSongsList: ({commit}, songList) => commit('SETSONGSLIST', songList),
  asyncNextSong: ({commit}, index) => commit('NEXTSONG', index),
  asyncAddSong: ({commit}, songInfo) => commit('ADDSONG', songInfo)
}
export default actions

2.getters.js（顾名思义，获取属性设置）

const getters = {
  listInfoId(state){
    return state.pageId.listInfoId
  },
  currentSong(state){
    //console.log('asd');
    //console.log(state.song.currentSong);
    return state.song.currentSong
  },
  currentTime(state){
    return state.song.currentSong.currentTime
  },
  song(state){
    return state.song
  }
}

export default getters

3.index.js（store入口文件）

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

4.mutations.js（函数内部执行）

const mutations = {
  INCREMENT (state) {
    state.count = state.count + 5
  },
  SETLISTINFOID(state, id){
    state.pageId.listInfoId = id
  },
  SETSONGINFOID(state, id){
    state.pageId.songInfoId = id
  },
  SETSONGHREF(state, hrefInfo){
    state.song.currentSong.hrefInfo = hrefInfo
  },
  SETCURRENTTIME(state, currentTime){
    state.song.currentSong.currentTime = currentTime
  },
  SETPLAYFLAG(state, flag){
    state.song.currentSong.playFlag = flag
  },
  SETSONGSLIST(state, songList) {
    state.song.songList = songList;
    state.song.currentSong.id = songList[0].id;
    state.song.currentSong.index = 0;
    state.song.currentSong.hrefInfo = {
      url:'http://music.163.com/song/media/outer/url?id='+songList[0].id+'.mp3'
    };
  },
  NEXTSONG(state, index) {
    state.song.currentSong.playFlag = false
    var temp_index = state.song.currentSong.index + index;
    if(temp_index < 0 || temp_index > state.song.songList.length)
      return
    state.song.currentSong.index += index;
    state.song.currentSong.hrefInfo = {
      url:'http://music.163.com/song/media/outer/url?id='+state.song.songList[state.song.currentSong.index].id+'.mp3'
    };
    state.song.currentSong.id = state.song.songList[state.song.currentSong.index].id;
    setTimeout(function() {
      state.song.currentSong.playFlag = true;
    }, 1000);
  },
  _UPDATESONGINDEX(state, index) {
    state.song.currentSong = state.song.songList[index];
  }
}

export default mutations

5.state.js（数据储存）

const state = {
  song: {
    currentSong: {
      playFlag:false,
      currentTime:0,
      index:-1,
      hrefInfo:{},
      title:'',
      singer:''
    },
    songList: [
      {
        index:0,
        hrefInfo:{},
        title:'',
        singer:''
      }
    ]
  },
  pageId: {
    songInfoId: 0,
    listInfoId: 0
  }
}
export default state

0x03 main.js引入

import store from './store'
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  store
})