【九】Vuex初始化

关于专题【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>