使用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