Vue2.0 Vuex初始化及歌手数据的配置

Unsplash

本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点部分,均有所更改和删减,关于更多 Vue 2.0 的知识和实际应用,还请大家购买课程进行学习实践,该系列博文的发布已得到黄轶老师的授权许可

授权许可

0 系列文章目录

Vue2.0 定制一款属于自己的音乐 WebApp Vue2.0 路由配置及Tab组件开发 Vue2.0 数据抓取及Swiper组件开发 Vue2.0 scroll 组件的抽象和应用 Vue2.0 歌手数据获取及排序 Vue2.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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DeveWork

为你的WordPress 博客开启两步验证功能(技术支持:谷歌)

如果你有谷歌账号的话,为了安全,最好是开启两步验证功能——即在原来的基础上增加手机验证码这一关。谷歌中涉及到两步验证的技术是Google Authenticat...

31070
来自专栏向治洪

关于React Native项目在android上UI性能调试实践

我们尽最大的努力来争取使UI组件的性能如丝般顺滑,但有的时候这根本不可能做到。要知道,Android有超过一万种不同型号的手机,而在框架底层进行软件渲染的时候是...

34950
来自专栏知晓程序

开发 | 一个 Android 开发者的小程序开发之旅

我是一名 Android 开发程序员,以前没有接触过前端开发,直到接手了公司的小程序项目,才开始逐渐接触前端领域。

12220
来自专栏我的小碗汤

【插件】解放鼠标,让浏览器更智能

首先感谢大家参与这周的送书活动。已经给小助手微信发送好友请求的,不要着急,这两天会通过验证,并拉大家进入抽奖群参与抽奖,大家肯定都可以参与的。

10720
来自专栏更流畅、简洁的软件开发方式

【自然框架】——思路、结构、特点的介绍(初稿,欢迎大家多提意见)

开场白   面向过程:面向过程是“写代码”,根据客户提出来的需求来写代码,包括函数。一步一步的写,都写完了,功能也就实现了。 面向对象:面向对象是“做设计”...

25070
来自专栏QQ音乐技术团队的专栏

React v16 新特性实践

我们在对以上新特性经过一段时间的使用过后,通过本文进行一些细节分享和总结。

73880
来自专栏DeveWork

为你的WordPress 博客开启两步验证功能(技术支持:谷歌)

如果你有谷歌账号的话,为了安全,最好是开启两步验证功能——即在原来的基础上增加手机验证码这一关。谷歌中涉及到两步验证的技术是Google Authenticat...

67760
来自专栏编程微刊

Eclipse如何从SVN更新和上传修改部分项目

22730
来自专栏木宛城主

SharePoint 2013怎样创建Wiki库

我们使用Wiki页面来分享知识,增进团队合作。下面我将向大家展示SharePoint 2013 Wiki的使用方法。教程我都将以这张Wiki页面(即当前页)为示...

23570
来自专栏知晓程序

晓实战 | 这样编辑小程序富文本,又快又方便!

我们会定期邀请优秀的开发者,从实践的角度,亲自分享他们使用知晓云(cloud.minaapp.com)开发的实战经验,如果你也想分享你的小程序实战经验,欢迎加入...

13430

扫码关注云+社区

领取腾讯云代金券