第十课：VueX初始化歌手数据的配置

首先引入Vuex

1.目录src/store

2.state.js

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

3.mutation-types.js

export const SET_SINGER = 'SET_SINGER'

4.mutations.js 修改数据

import * as types from './mutation-types'
const mutations = {
  [types.SET_SINGER](state, singer) {
 state.singer = singer
  },

}
export default mutations

5.getter.js

export const singer = state => state.singer

6.index.js 入口js

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'
//插件 在控制台打印log
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)
//调试工具
const debug = process.env.NODE_ENV !== 'production'
//单例模式
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

7.main.js

import store from './store'

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

8.singer.vue

//语法堂
  import {mapMutations} from 'vuex'
// method中把扩展运算符映射成setSinger
      ...mapMutations({
        setSinger: 'SET_SINGER'
      })

      selectSinger(singer) {
        this.$router.push({
          path: `/singer/${singer.id}`
        })
        this.setSinger(singer) //把paload传进来
      },

9.singer-detail.vue 取

 import {mapGetters} from 'vuex'

  computed: { ...mapGetters([ 'singer' ]) },
    created() { this._getDetail() },