Unsplash
https://www.tuicool.com/articles/YbyMNf6
本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可
授权许可
0 系列文章目录
1 子路由配置
通过歌手列表页而进入歌手详情页,我们这里需要写一个详情页的组件,并将该组件挂载到列表页的子路由下面,并且在 Singer 组件中创建一个 <router-view>
来承载子路由,路由跳转我们写在 listview
组件中,给每一个列表项添加一个点击事件,基础组件里不写业务逻辑,只负责派发事件
// components/singer-detail/singer-detail.vue <template> <transition name="slide"> <div class="singer-detail"></div> </transition> </template> <script type="text/ecmascript-6"> </script> <style scoped lang="stylus" rel="stylesheet/stylus"> @import "~common/stylus/variable" .singer-detail position: fixed z-index: 100 top: 0 left: 0 right: 0 bottom: 0 background: $color-background .slide-enter-active, .slide-leave-active transition: all 0.3s .slide-enter, .slide-leave-to transform: translate3d(100%, 0, 0) </style>
// router/index.js import SingerDetail from 'components/singer-detail/singer-detail' export default new Router({ routes: [ ... { path: '/singer', component: Singer, children: [ { path: ':id', component: SingerDetail } ] } ] })
// singer.vue <template> <div class="singer"> <list-view :data="singerList"></list-view> <router-view></router-view> </div> </template>
// listview.vue <template> <scroll class="listview" :data="data" ref="listview" :probe-type="probeType" :listenScroll="listenScroll" @scroll="scroll"> <ul> <li v-for="(group, index) in data" :key="index" class="list-group" ref="listGroup"> <h2 class="list-group-title">{{group.title}}</h2> <uL> <li @click="selectItem(item)" v-for="(item, index) in group.items" :key="index" class="list-group-item"> <img class="avatar" v-lazy="item.avatar"> <span class="name">{{item.name}}</span> </li> </uL> </li> </ul> </scroll> </template> <script type="text/ecmascript-6"> export default { ... methods: { selectItem(item) { this.$emit('select', item) } } } </script>
从 listview
组件中派发出来的 Singer 类,获取其歌手 id 拼接至子路由路径
// singer.vue <template> <div class="singer"> <list-view @select="selectSinger" :data="singerList"></list-view> <router-view></router-view> </div> </template> <script type="text/ecmascript-6"> export default { ... methods: { ... selectSinger(singer) { this.$router.push({ path: `/singer/${singer.id}` }) } } }
运行结果
2 Vuex 配置
Vuex 的相关介绍可在官网中进行了解和学习,能够帮助我们解决路由跳转数据传递的问题,我们把相关文件都放在 store
文件夹下, index.js
为入口文件, State 文件管理所有状态, Mutation 文件进行状态更改, mutation-types.js
文件用来存储跟 mutation.js
文件相关的一些字符串常量, Actions 文件提交 mutation
并可包含异步操作, getters 文件用来派生状态
目录结构
// store/index.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' 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()] : [] })
// store/getters.js export const singer = state => state.singer
// store/mutations.js import * as types from './mutation-types' const mutations = { [types.SET_SINGER](state, singer) { state.singer = singer } } export default mutations
// store/mutation-types.js export const SET_SINGER = 'SET_SINGER'
// store/state.js const state = { singer: {} } export default state
安装 Vuex 并在入口文件初始化
// main.js import store from './store' new Vue({ el: '#app', render: h => h(App), router, store })
完成初始配置之后,我们会在 singer
组件进行状态写入,在 singer-detail
组件中进行获取
// singer.vue <script type="text/ecmascript-6"> export default { ... methods: { selectSinger(singer) { this.$router.push({ path: `/singer/${singer.id}` }) this.setSinger(singer) }, ... ...mapMutations({ setSinger: 'SET_SINGER' }) } } </script>
// singer-detail.vue <script type="text/ecmascript-6"> import {mapGetters} from 'vuex' export default { computed: { ...mapGetters([ 'singer' ]) }, created() { console.log(this.singer) } } </script>
运行结果
在控制台中,Vuex 提供的 log 还能帮助我们查看数据的变化
log 打印
该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Vue_Music_07 上了,有需要的同学可自行下载
End of File
行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下 喜欢 和 关注 ,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^