一、安装依赖

npm install vuex --save
或者
yarn add vuex --save复制代码

二、基本配置文件事例

在项目中src文件夹下新建store文件夹,并在创建如下文件：

index.js 入口文件
state.js 所有状态的管理
mutations.js
mutation-types.js 存储相关mutation字符串常量
action.js 异步操作，修改，mutation的封装
getters映射

1）在main.js中引入store

import store from './store'
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})复制代码

2）index文件

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'
// createLogger 每次通过mutation修改state通过log控制台打印log，看到日志，方便查看

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'
// npm run dev是dev环境,线上调试degbug为true
// npm run build 是 production环境,线上调试degbug为false
// 当debug为true开启严格模式
// 当为false，上线时这个模式关闭
// debug会有性能损失，所以不建议线上使用
export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})
复制代码

3）state文件

import {playMode} from 'common/js/config'

const state = {
  singer: {},
  playing: false, // 是否正在播放
  fullScreen: false, // 是否全屏
  playlist: [], // 播放的列表
  sequenceList: [], // 顺序列表 随机播放列表 历史列表
  mode: playMode.sequence, // 播放模式
  currentIndex: -1 // 单签歌曲
}
export default state
复制代码

// config.js
export const playMode = {
  sequence: 0,
  loop: 1,
  random: 2
}

复制代码

4）mutation-types

export const SET_SINGER = 'SET_SINGER'

export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'

export const SET_FULL_SCREEN = 'SET_FULL_SCREEN'

复制代码

5）mutations

import * as types from './mutation-types'

const mutations = {
  [types.SET_SINGER](state, singer) {
    state.singer = singer
  },
  [types.SET_PLAYING_STATE](state, flag) {
    state.playing = flag
  },
  [types.SET_FULL_SCREEN](state, flag) {
    state.fullScreen = flag
  },
}
export default mutations
复制代码

6）getters

export const singer = state => state.singer

export const playing = state => state.playing

export const fullScreen = state => state.fullScreen
复制代码

7）actions

import * as types from './mutation-types'

export const selectPlay = function({commit, state}, {list, index}) {
  commit(types.SET_SEQUENCE_LIST, list)
  if (state.mode === playMode.random) {
    let randomList = shuffle(list)
    commit(types.SET_PLAYLIST, randomList)
    index = findIndex(randomList, list[index])
  } else {
    commit(types.SET_PLAYLIST, list)
  }
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
export const randomPlay = function({commit}, {list}) {
  commit(types.SET_PLAY_MODE, playMode.random)
  commit(types.SET_SEQUENCE_LIST, list)
  let randomList = shuffle(list)
  commit(types.SET_PLAYLIST, randomList)
  commit(types.SET_CURRENT_INDEX, 0)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
复制代码

我们在组件中使用 来获得状态 show , 类似的 , 我们可以使用 $store.getters.not_show 来获得状态 not_show 。

注意 : $store.getters.not_show 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

三、mapGetters、mapMutations、mapActions的使用事例

1）mapGetters

注意：要使用...mapGetters、...mapMutations、..mapActions
需要安装eslint-plugin-vue
并且在目录也有.barbelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

复制代码

import {mapGetters} from ''vuex
//  一般在computed中使用
computed:{
  ...
  },
  ...mapGetters([// 一般放在computed的最后
      'currentIndex',
      'fullScreen'.
      'playlist'
  ])
}
// 可直接在template中使用
<template>
    <div>
      <div v-html="currentIndex"></div>
    </div>
</template>
复制代码

2）mapMutations

import {mapMutations} from ''vuex
//  一般在methods中使用
methods:{
  ...
  back() {
      this.setFullScreen(false)// 使用
  },
  open() {
      this.setFullScreen(true)
  },
  ...mapMutations([// 一般放在computed的最后
      setFullScreen: 'SET_FULL_SCREEN'
  ])
}
// 可直接在template中使用
<template>
    <div>
      <div v-html="currentIndex"></div>
    </div>
</template>
复制代码

2）mapActions

在methods中使用

methods:{
  ...
  },
  selectItem(item, index) {
      this.selectPlay({
        list: this.songs,
        index: index
      })
 },
random() {
      this.randomPlay({
        list: this.songs
      })
 },
  ...mapActions([
      'selectPlay',
      'randomPlay'
    ])
}复制代码