vuex简单入门：singer实例创建以及读写全过程

Vuex 是什么？

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



对于原理图的分析理解：
Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。
state：存入了全部的应用层状态，供vue组件渲染调用
getter：从state中派出的状态，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
mutations：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
actions：action类似mutation，她们的不同点在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
模块化代码实例应用：
目录：

下面实例化创建‘singer’这个状态
1、state： 在state里初始化singer

  const state = {
    singer: {},
  }
  export default state

2、getter：派发出state.singer

export const singer = state => state.singer

3、mutation-types：专门放mutation的方法常量值，以便多人协作，设置好改变singer的方法常量SET_SINGER

export const SET_SINGER = 'SET_SINGER'

4、mutation：真正操作修改singer的函数

import * as types from './mutation-types'            //types拿到了所有的方法名

const mutations = {
  [types.SET_SINGER](state, singer){                   //规定第一个参数为state，第二个为传入修改值
    state.singer = singer
  }
}

export default mutations

5、index：组装模块并导出 store 的地方

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'            
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'  //常用的是内置的logger插件,每当改变mutation值的时候，在devtool打印出对应修改前和修改后的信息

Vue.use(Vuex)

//非生产模式下开启debug
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

6、最后在模块入口文件main.js配置store，即可在组件中使用singer这个状态

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

接下来的问题就是如何在组件中调用和修改singer
1、设置修改singer
vuex提供了语法糖mapMutation：其中存入了mutation所有的方法
在methods中写入

...mapMutations({
       setSinger: 'SET_SINGER'          //往外提供了setSinger方法以供修改'SET_SINGER'对应的状态singer
 })

调用setSinger方法修改singer状态

selectSinger(singer){                  //在selectSinger这个事件中修改singer
        this.setSinger(singer)
      },

2、获取singer
同样的vuex提供了mapGetters，其中存入了state的所有数据，由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

import {mapGetters} from 'vuex'
 computed:{
     ...mapGetters([
            'singer'          //往外提供了singer这个数据
      ])
    },