使用vuex保存singer每个歌星的基本信息

1.建src/store文件夹,建立以下文件来存储歌星信息

2.state.js

const state = {
  singer:{}
}

export default state

2.mutations.js

import * as types from './mutation-types'
const mutations = {
  [types.SET_SINGER](state,singer){//mutations接收两个参数，第一个是state另外一个是传递过来的值
    state.singer = singer
  }
}


export default mutations

3.mutation-type.js

export const SET_SINGER = 'SET_SINGER'

4.getters.js

export const singer = state =>state.singer

5.index.js

import Vue from 'vue'
import Vuex from  'vuex'
import * as actions from './actions'
import * as getters from './getters'//es6的语法，可以在使用mutations里面导出的内容时候直接用mutations.点出来
import state from './state'
import  mutations from './mutations'
Vue.use(Vuex)

export default new Vuex.Store({
  actions,
  mutations,
  getters,
  state
})

6.在singer.vue中引入mapMutations from vuex,并映射到方法中，设置setSinger方法

import {mapMutations} from 'vuex'


  methods:{
        ...mapMutations({
          setSinger:'SET_SINGER'
        }),
}

7.在点击选择明星的时候，将点击明星的信息存储到setSinger中：

 selectSinger(singerName){
          this.$router.push({
            path: `/singer/${singerName.id}`
          })
          this.setSinger (singerName)
        },

8.在singer-detail.vue中获取点击时候保存的明星信息：

a.引入mapGetters
import {mapGetters} from 'vuex'
b.将singer映射到计算属性中：
  computed:{
      ...mapGetters([
        'singer',
      ])
    }
c.created(){}的时候打印一下singer