Vuex簡單入門

什麼是Vuex

在Vue中，多元件的開發給我們帶來了很多的友善，但同時當項目規模變大的時候，多個元件間的資料通信和狀态管理就顯得難以維護。而Vuex就此應運而生。将狀态管理單獨拎出來，應用統一的方式進行處理，在後期維護的過程中資料的修改和維護就變得簡單而清晰了。Vuex采用和Redux類似的單向資料流的方式來管理資料。使用者界面負責觸發動作（Action)進而改變對應狀态（State），進而反映到視圖（View）上。如下圖所示：

vuex-flow.png

使用Vuex

安裝:

npm install --save vuex      

引入：

import Vuex from 'vuex'
import Vue from 'vue'      

Vuex的組成部分

完整的應用Vuex開發的應用結構應該是這樣的：

vuex-complete.png

下面針對比較核心的部分進行說明。

State

​

​store​

​對象，後期就可以使用​

​this.$store.state​

​直接擷取狀态

//store為執行個體化生成的
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h      

這個store可以了解為一個容器，包含着應用中的state等。執行個體化生成store的過程是：

const mutations = {...};
const actions = {...};
const      

​

​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

import createLogger from 'vuex/dist/logger'      

參考文檔