Vuex簡單入門

什麼是Vuex？

在Vue中，多組件的開發給我們帶來了很多的方便，但同時當項目規模變大的時候，多個組件間的數據通信和狀態管理就顯得難以維護。而Vuex就此應運而生。將狀態管理單獨拎出來，應用統一的方式進行處理，在後期維護的過程中數據的修改和維護就變得簡單而清晰了。Vuex採用和Redux類似的單向數據流的方式來管理數據。用戶界面負責觸發動作（Action)進而改變對應狀態（State），從而反映到視圖（View）上。

使用Vuex

安裝:

npm install --save vuex

引入：

import Vuex from 'vuex'
import Vue from 'vue'
 
Vue.use(Vuex)

Vuex的組成部分（核心部分）

 

State

State負責存儲整個應用的狀態數據，一般需要在使用的時候在跟節點注入store對象，後期就可以使用this.$store.state直接獲取狀態

//store爲實例化生成的
import store from './store'
 
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

這個store可以理解爲一個容器，包含着應用中的state等。實例化生成store的過程是：

const mutations = {...};
const actions = {...};
const state = {...};
 
Vuex.Store({
  state,
  actions,
  mutation
});

後續在組件中使用的過程中，如果想要獲取對應的狀態你就可以直接使用this.$store.state獲取，當然，也可以利用vuex提供的mapState輔助函數將state映射到計算屬性中去，如

//我是組件
import {mapState} from 'vuex'
 
export default {
  computed: mapState({
    count: state => state.count
  })
}

這樣直接就可以在組件中直接使用了。

 

Mutations

Mutations的中文意思是“變化”，利用它可以更改狀態，本質就是用來處理數據的函數，其接收唯一參數值state。store.commit(mutationName)是用來觸發一個mutation的方法。需要記住的是，定義的mutation必須是同步函數，否則devtool中的數據將可能出現問題，使狀態改變變得難以跟蹤。

const mutations = {
  mutationName(state) {
    //在這裏改變state中的數據
  }
}

在組件中觸發：

//我是一個組件
export default {
  methods: {
    handleClick() {
      this.$store.commit('mutationName')
    }
  }
}

或者使用輔助函數mapMutations直接將觸發函數映射到methods上，這樣就能在元素事件綁定上直接使用了。如：

import {mapMutations} from 'vuex'
 
//我是一個組件
export default {
  methods: mapMutations([
    'mutationName'
  ])
}

 

Actions

Actions也可以用於改變狀態，不過是通過觸發mutation實現的，重要的是可以包含異步操作。其輔助函數是mapActions與mapMutations類似，也是綁定在組件的methods上的。如果選擇直接觸發的話，使用this.$store.dispatch(actionName)方法。

//定義Actions
const actions = {
  actionName({ commit }) {
    //dosomething
    commit('mutationName')
  }
}

在組件中使用

import {mapActions} from 'vuex'
 
//我是一個組件
export default {
  methods: mapActions([
    'actionName',
  ])
}

 

Getters

有些狀態需要做二次處理，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態進行訪問。或者直接使用輔助函數mapGetters將其映射到本地計算屬性中去。

const getters = {
  strLength: state => state.aString.length
}
//上面的代碼根據aString狀態派生出了一個strLength狀態

在組件中使用

import {mapGetters} from 'vuex'
 
//我是一個組件
export default {
  computed: mapGetters([
    'strLength'
  ])
}

Plugins

插件就是一個鉤子函數，在初始化store的時候引入即可。比較常用的是內置的logger插件，用於作爲調試使用。

import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

參考文檔

http://vuex.vuejs.org/zh-cn/index.html