007_Vue音乐播放器（歌手详情页，使用vuex进行项目的数据状态管理）

现在介绍vuex的使用     

Vuex官方文档

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

首先 使用 cnpm  install vuex --save ， 安装vuex。

然后在 src 目录下 创建 store 文件夹

其中，action.js 文件表示有异步的状态管理，现在暂时用不到，以后用到再看。

getters.js 文件定义 需要获取的状态库里的数据。

index.js 是store文件夹的入口文件，将其余文件夹暴露出去并定义一些插件用以查看状态改变的日志。

mutation.js 是数据提交的唯一方式，调用里面的函数来完成数据状态的更新。

state.js 是数据的状态库，可以将需要使用vuex管理的数据定义在state里面。

首先在 main.js 入口文件中引入 store 文件仓库

然后在store文件夹的index.js入口文件中，导入Vue和Vuex，并把Vuex注册到Vue中，然后把 action 和getters文件中的 暴露的变量全部引入， 将state和mutation对象引入。  这里还使用了Vuex的调试插件，然后向外暴露一个Store对象，里面包含 引入的各个文件对象。

import Vue from 'vue';
import Vuex from 'vuex';

import * as actions from "./action";
import * as getters from "./getters";
import state from "./state";
import mutations from "./mutation";

import createLogger from 'vuex/dist/logger';//查看vuex日志

Vue.use(Vuex);//注册vuex

const debug = process.env.NODE_ENV !== 'production';//在!production环境下(开发模式)使用debug调试

//Store 表示 储存库，用来存储数据的状态
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    plugins:debug?[createLogger()]:[],//判断debug是否开启查看日志
})

然后是state.js文件，在这里非常简单的就可以定义一个数据 singer（点击查看的歌手信息详情）

//state 代表状态，把需要存储的数据定义在这里
const state = {
    singer:{},//定义 歌手 信息的对象 
}

export default state;

然后是mutation.js 文件，在这里定义 提交 歌手信息数据 的函数

//mutation 代表改变，只可以通过这里面定义的函数来提交数据
const mutations = {
    //所有函数传入的第一个参数为 state (状态)
  set_singer(state, singer) {
    state.singer = singer;
  }
}

export default mutations;

然后是 getters.js 文件，在这里定义 获取 歌手信息数据 的函数，为什么需要使用 getter函数呢，Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中，使得其可以像$router一样，使用 this.$store.state.singer 就可以在每个组件下获取到状态库的数据。这样使用getter函数，是为了以后对某些数据需要进行过滤处理或者别的操作时候更加方便快捷，我们只需在组件中取得处理后的数据即可，不必在前端组件里写复杂的处理语句。

// 此函数  定义  需要取得的数据的名称，通过传入 state 状态库，然后返回特定的数据。
export const singer = (state) => {
  return state.singer
};

 

介绍完Vuex了，现在来使用Vuex来管理数据的状态。

歌手详情页的数据，需要从歌手列表页点击，跳转路由，并且传递点击的歌手的信息。

在listView.vue组件中，为每个歌手信息的li绑定点击事件，并传入点击的li的歌手信息。

在这里，由于singer是歌手页的组件，所以listView应该将这个函数抛出去给singer这个歌组件去处理

在singer组件中接收响应事件，并调用自身定义的处理函数。

因为要在singer组件中通过 mutation 来提交数据的状态，因此引入辅助函数

import {mapMutations} from "vuex";//vuex提交数据的语法糖

然后在goToSingerDetail 函数中，完成singer 数据的提交

在歌手详情页，引入vuex的getter辅助函数

import {mapGetters} from "vuex";//vuex取数据的语法糖