Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

1.组件放置在app.vue中

2.state.js定义状态

import {playMode} from 'common/js/config'const state = {  singer: {},                      playing: false,             //playing: 播放状态  fullScreen: false,          //fullScreen: 是否全屏（normal播放器/mini播放器）  playlist: [],               //点击前进、后退实际是有一个播放列表：playlist  sequenceList: [],           //sequenceList顺序播放列表  mode: playMode.sequence,    //mode:播放模式  0顺序  1 循环  2 随机  currentIndex: -1,           //currentIndex 当前播放的歌曲  disc: {},  topList: {}}export default state

3.获取state的一些状态getter.js

需要从 store 中的 state 中派生出一些状态，Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）

export const singer = state => state.singerexport const playing = state => state.playingexport const fullScreen = state => state.fullScreenexport const playlist = state => state.playlistexport const sequenceList = state => state.sequenceListexport const mode = state => state.modeexport const currentIndex = state => state.currentIndexexport const currentSong = (state) => {  return state.playlist[state.currentIndex] || {}}export const disc = state => state.discexport const topList = state => state.topList

4.mutations.js

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

//使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。//这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然export const SET_SINGER = 'SET_SINGER'export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'export const SET_PLAYLIST = 'SET_PLAYLIST'export const SET_SEQUENCE_LIST = 'SET_SEQUENCE_LIST'export const SET_PLAY_MODE = 'SET_PLAY_MODE'export const SET_CURRENT_INDEX = 'SET_CURRENT_INDEX'export const SET_DISC = 'SET_DISC'export const SET_TOP_LIST = 'SET_TOP_LIST'

import * as types from './mutation-types'const mutations = {  [types.SET_SINGER](state, singer) {    state.singer = singer  },  [types.SET_PLAYING_STATE](state, flag) {    state.playing = flag  },  [types.SET_FULL_SCREEN](state, flag) {    state.fullScreen = flag  },  [types.SET_PLAYLIST](state, list) {    state.playlist = list  },  [types.SET_SEQUENCE_LIST](state, list) {    state.sequenceList = list  },  [types.SET_PLAY_MODE](state, mode) {    state.mode = mode  },  [types.SET_CURRENT_INDEX](state, index) {    state.currentIndex = index  },  [types.SET_DISC](state, disc) {    state.disc = disc  },  [types.SET_TOP_LIST](state, topList) {    state.topList = topList  }}export default mutations

5.actions.js

actions应用场景：

1. 异步操作
2. 封装多个mutations更改state

6.界面