【九】Vuex初始化
关于专题【vue开发音乐App】
Vuex是一个专为Vue.js应用程序开发的状态管理模式。 它可以轻而易举地处理多个页面或多个组件共享一个状态（数据）的情况，包括：
多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
Vuex的更多内容及使用细节请查看官方文档，本文介绍一种能够高效管理Vuex的初始化方式，在日常开发Vue.js项目时都能用到，真香系列！
一、安装Vuex
cnpm i vuex --save
二、文件结构
src
store
actions.js （处理异步操作或对mutations的封装）
getters.js （对状态的获取）
index.js （入口文件）
mutation-types.js （存储mutations相关的字符串常量）
mutations.js （对状态的修改）
states.js （存储所有状态）
初始化项目时，在src目录下新建store文件夹，其下新建如上6个js文件，各文件的具体内容如下（以管理歌手信息为例）：
1. states.js
const states = {
singer: {},
...
}
export default states
2. mutation-types.js
export const SET_SINGER = 'SET_SINGER'
...
3. mutations.js
import * as types from './mutation-types'
const mutations = {
// 修改singer
[types.SET_SINGER] (states, singer) {
states.singer = singer
},
...
}
export default mutations
4. getters.js
export const singer = states => states.singer
...
5. actions.js
// 在初始化项目的时候，该文件一般是空的，不影响对Vuex的使用，当需要对mutations封装时，可以修改此文件
// 下面的代码是在开发音乐播放功能时对播放器各功能的封装
import * as types from './mutation-types'
// 选择播放
export const selectPlay = ({commit}, {list, index}) => {
commit(types.SET_SEQUENCE_LIST, list)
commit(types.SET_PLAY_LIST, list)
commit(types.SET_CURRENT_INDEX, index)
commit(types.SET_FULL_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}
...
6. index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import states from './states'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'
// 显式地通过Vue.use()来安装Vuex
Vue.use(Vuex)
// 只在开发环境启动debug模式，logger插件会在控制台打印状态修改前、修改后的信息
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
actions,
getters,
states,
mutations,
strict: debug,
plugins: debug ? [createLogger()] : []
})
三、在main.js中将Vuex注入Vue
import store from './store'
...
new Vue({
el: '#app',
store,
render: h => h(App)
})
四、使用方法
示例场景
歌手列表页面展示了众多歌手名单，点击某个歌手进入该歌手的详情页。在这个点击事件中，我们需要做两件事：
记录被点击歌手的信息（只需歌手id），如何记录呢？就是存进states.singer对象中去；
点击歌手会触发路由变化，进入歌手详情页，我们需要在详情页获取第1步保存的歌手id（然后从后端获取该歌手的详细信息并展示 ） 。
具体代码如下：
1. singer.vue保存歌手id
发表评论 (审核通过后显示评论)：