关于专题【vue开发音乐App】

Vuex是一个专为Vue.js应用程序开发的状态管理模式。 它可以轻而易举地处理多个页面或多个组件共享一个状态(数据)的情况,包括:

  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态

Vuex的更多内容及使用细节请查看官方文档,本文介绍一种能够高效管理Vuex的初始化方式,在日常开发Vue.js项目时都能用到,真香系列!

一、安装Vuex

cnpm i vuex --save

二、文件结构

  • src
    • store
      • actions.js (处理异步操作或对mutations的封装)
      • getters.js (对状态的获取)
      • index.js (入口文件)
      • mutation-types.js (存储mutations相关的字符串常量)
      • mutations.js (对状态的修改)
      • states.js (存储所有状态)

初始化项目时,在src目录下新建store文件夹,其下新建如上6个js文件,各文件的具体内容如下(以管理歌手信息为例):

1. states.js
const states = {
  singer: {},
  ...
}

export default states
2. mutation-types.js
export const SET_SINGER = 'SET_SINGER'
...
3. mutations.js
import * as types from './mutation-types'

const mutations = {
  // 修改singer
  [types.SET_SINGER] (states, singer) {
    states.singer = singer
  },
  ...
}

export default mutations
4. getters.js
export const singer = states => states.singer
...
5. actions.js
// 在初始化项目的时候,该文件一般是空的,不影响对Vuex的使用,当需要对mutations封装时,可以修改此文件

// 下面的代码是在开发音乐播放功能时对播放器各功能的封装
import * as types from './mutation-types'

// 选择播放
export const selectPlay = ({commit}, {list, index}) => {
  commit(types.SET_SEQUENCE_LIST, list)
  commit(types.SET_PLAY_LIST, list)
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
...
6. index.js
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import states from './states'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

// 显式地通过Vue.use()来安装Vuex
Vue.use(Vuex)

// 只在开发环境启动debug模式,logger插件会在控制台打印状态修改前、修改后的信息
const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  states,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})

三、在main.js中将Vuex注入Vue

import store from './store'

...

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

四、使用方法

示例场景

歌手列表页面展示了众多歌手名单,点击某个歌手进入该歌手的详情页。在这个点击事件中,我们需要做两件事:

  1. 记录被点击歌手的信息(只需歌手id),如何记录呢?就是存进states.singer对象中去;
  2. 点击歌手会触发路由变化,进入歌手详情页,我们需要在详情页获取第1步保存的歌手id(然后从后端获取该歌手的详细信息并展示 ) 。

具体代码如下:

1. singer.vue保存歌手id
<template>
  <div class="singer">
    <!--点击歌手,执行selectSinger方法-->
    <listview :data="singerList" @select="selectSinger"></listview>
  </div>
</template>

<script type="text/ecmascript-6">
  // 1. 引入vuex提供的语法糖mapMutations
  import {mapMutations} from 'vuex'

  ...

  // 在methods中定义mapMutations
  methods: {
    selectSinger (singer) {
      this.$router.push({
        path: `/singer/${singer.id}`
      })
      // 3. 通过下面的代码对singer进行赋值,完成歌手id的保存
      this.setSinger(singer)
    },

    // 2. 通过扩展运算符的方式使用mapMutations,把mutations的修改映射成一个方法:名为setSinger,值为mutation-types.js里的'SET_SINGER'常量。此时,setSinger方法被注册到vue实例上,即可以通过this访问
    ...mapMutations({
      setSinger: 'SET_SINGER'
    })
  },

  ...
  
</script>
2. singer-detail.vue获取歌手id
<script type='text/ecmascript-6'>
  // 1. 引入vuex提供的语法糖mapGetters
  import {mapGetters} from 'vuex'

  ...

  // 在computed中定义mapGetters
  computed: {
    // 2. 通过扩展运算符的方式使用mapGetters,里面是一个数组,数组内的状态和data中的一样,都可以通过this获取。所以可以在created钩子中通过向后端发送请求传递this.singer来获取该歌手的信息。
    ...mapGetters([
      'singer'
    ])
  },

  ...
  
</script>

0
浏览:1,227

0 条评论

发表评论

电子邮件地址不会被公开。

你必须允许浏览器启用JavaScript才能看到验证码

Scroll Up