大概步骤：

目标效果

---

五、配置排行榜详情页面vuex数据

• 要点：
  • 在store文件夹中定义相关的state、mutations、getters、mutation-types
  • 数据分为：
  • 排行榜首页点击存入数据mutation
  • 排行榜详情页读取数据state

（1）配置store

# store-->state.js

const state = {
	/*排行榜数据*/
	topList:{}
}
export default state

# store-->getters.js

/*排行榜数据getter映射*/
export const topList = state=> state.topList

# store-->mutation-types.js

/*存入排行榜数据的方法名*/
export const SET_TOPLIST = 'SET_TOPLIST'

# store-->mutations.js

const mutations = {
	/*存入排行榜数据的方法*/
	[types.SET_TOPLIST](state,topList){	//state固定，topList是参数
		state.topList = topList
	},
}
export default mutations

（2）排行榜首页 中存入数据mutations

# rank.vue

import {mapMutations} from 'vuex'	//引入存入state数据的vuex

methods:{
	selectRank(item){
		//存入点击的数据进state
		this.setTopList(item)
	},
	...mapMutations({	//注意是有s的，是对象
		setTopList:'SET_TOPLIST'
	})	
}

（3）排行榜详情页 中获取数据state

# RankDetail.vue

import {mapGetters} from 'vuex' //引入vuex获取数据

computed:{
	/**获取state数据****/
	...mapGetters([	//是数组
		'topList'	
	])
}

（4）把获取到的数据应用到详情页中

---

项目来源：慕课网
如有建议和疑问可联系
QQ：1017386624
邮箱：[email protected]