Vuex狀態管理(state,mutation,action,getter徹底分離)

1、安裝依賴

npm install vuex --save
或者
yarn add vuex --save複製代碼

2、基本配置文件事例

在項目中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 發生變化才能修改。

3、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({// 通常放在methods的最後      
      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'
    ])
}複製代碼

原文連接：www.jianshu.com/p/59e058984…