快速瞭解Vuex

提要：提起react就會想起其應用最普遍的redux狀態管理工具，vue中的官方推薦的狀態管理工具就是Vuex。

看到同事在鼓搗Vuex的東西，前面項目完成後也沒有好好總結一下Vuex的知識，全部就再回頭看看，溫故知新。

什麼是Vuex？

根據Vuex文檔中的描述，Vuex是使用於Vue.js應用的狀態管理庫，爲應用中的全部組件提供集中式的狀態存儲與操做，保證了全部狀態以可預測的方式進行修改。

這個狀態自管理應用包含是三個部分：

1. state: 驅動應用的數據源；
2. view：以聲明方式將state映射到視圖；
3. actions：相應view上的用戶輸入致使的狀態變化。

如下是一個表示「單項數據流」理念的極簡示意： 

 

可是，當咱們遇到多個組件共享狀態時，單向數據流的簡潔性就很容易被迫害：

多個視圖依賴於同一狀態。 來自不一樣視圖的行爲須要變動同一種狀態。

對於問題一，傳參的方法對於多層嵌套的組件就會很是繁瑣，而且對於兄弟組件建的狀態傳遞無能爲力。對於問題二，咱們常常會採用父子組件直接引用或者時間來變動和同步狀態的多份拷貝。以上的這些模式很是脆弱，一般會致使沒法代碼沒法維護。

所以，咱們能夠把組件的狀態共享抽取出來，以一個全局單例模式管理。在這種模式下，咱們的組件樹構成一個巨大的「視圖」，無論在樹的那個位置，任何組件都可以獲取狀態或者出發行爲。

另外，經過定義和隔離狀態管理中心的各類概念並強制遵循必定的規則，咱們的代碼就會變得結構化且易維護。

這就是Vuex背後的基本思想，借鑑了Flux、Redux。全部之前用過Redux後，學習Vuex也沒有比較吃力的狀況。

 

 

什麼狀況下應該用Vuex

若是不須要開發大型單頁應用，使用Vuex多是繁瑣冗餘的。若是你的應用足夠簡單，最好不要使用Vuex。可是，若是須要構件一個大型單頁應用，就應該考慮使用組件外部的狀態管理工具，對於vue應用Vuex就成爲天然而然的選擇。

Vuex中的幾個核心概念

學習一個知識點就須要掌握知識點中涉及到的一些核心概念，弄懂了概念，學習起來就可以如魚得水。

State

單一狀態數

Vuex使用單一狀態樹，就是用一個對象就包含了所有的應用的層級狀態。因此它便做爲一個【惟一數據源（SSOT）】而存在。這也意味着，每一個應用將牢牢包含一個store實例。但一狀態樹讓咱們可以直接定位任一特定的狀態片斷，在調試的過程當中也可以輕易地取得整個當前應用狀態的快照。

在Vue組件中獲取Vuex狀態

因爲Vuex的狀態存儲是響應式的，從store實例中讀取狀態最賤單的方式就是在計算屬性中返回某個狀態：

// 建立一個 Counter 組件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

沒當 store.state.count 變化的時候，就會重新求取計算屬性，而且觸發更新相關聯的DOM。

然而，這種模式致使組件依賴的全局狀態單例，在模塊化的構建系統中，在每一個須要使用state的組件中須要頻繁地導入，而且在測試組件時須要模擬狀態。

Vuex經過store選項，提供了一種機制將狀態從根組件注入到每一個子組件中（須要使用Vue.use(Vuex)）：

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 「store」 選項，這能夠把 store 的實例注入全部的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

經過在根事例中註冊store選項，該store實例會注入到根組件下的全部子組件中，且子組件可以經過this.$store訪問到。

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

mapState輔助函數

當一個組件須要獲取多個狀態時，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們可使用mapState輔助函數幫助咱們生成計算屬性：

//在單獨構建的版本中輔助函數爲Vuex.mapState
import { mapState } from 'vuex'

export default {
    //...
    computed: mapState({
        //箭頭函數可以使代碼更簡練
        count: state => state.count,
        //傳字符串'count'等同於`stete => state.count`
        countAlias: 'count',
        //爲了可以使用`this`獲取局部狀態，必須使用常規函數
        countPlusLocalState(state) {
            return state.count + this.localCount
        }
    })
}

當映射的計算屬性的名稱與state的子節點名稱相同時，咱們也能夠給mapState傳入一個字符串數組。

computed: mapState([
    //映射 this.count 爲 store.state.count
    'count'
])

對象展開運算符

mapState函數返回的是一個對象。咱們如何將它與局部計算屬性混合使用呢？一般，咱們須要使用一個工具函數來將多個對象合併爲一個，以使咱們能夠將最終對象傳給computed屬性。可是自從有了對象展開運算符，如今咱們能夠極大地簡化寫法：

computed: {
    localComputed (){    },
    //使用對象展開運算符將此對象混入到外部對象中
    ...mapState({
        //...
    })
}

組件仍然保有局部狀態

使用Vuex並不意味着須要將全部的狀態放入Vuex。雖然將全部的狀態放到Vuex會使狀態更顯式和易調試，可是會是代碼變得冗長和不直觀。若是有些狀態嚴格屬於單個組件，最好是做爲組件的局部狀。應該能做爲局部狀態的就保留局部狀態。

Getters

有時候咱們須要從store中的state中派生出一些狀態，例如對列表盡心過濾並計數：

computed: {
    doneTodosCount () {
        return this.$store.state.todos.filter(todo => todo.done.length)
    }
}

若是有多個組件須要用到此屬性，咱們要麼複製這個函數，或者抽取到一個共享函數而後在多出導入它——不管哪一種方式都不是很理想。

Vuex容許咱們在store中定義「getters」（能夠認爲是store的計算屬性）。Getters接受state做爲其第一個參數：

const store = new Vuex.Store({
    state: {
        todos: [
            {id: 1, text: "...", done: true},
            {id: 2, text: "...", done: false}
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        }
    }
})

Getters會暴露出store.getters對象：

store.getters.doneTodos //-> [{id: 1, text: '...', done: true}]

Getters也能夠接受其餘getters做爲第二個參數：

getters: {
    doneTodosCount: (state, getters)=> {
        return getters.doneTodos.length;
    }
}

store.getters.doneTodosCount //-> 1

咱們能夠很容易地在任何組件中使用它：

computed: {
    doneTodosCount(){
        return this.$store.getters.doneTodosCount;
    }
}

mapGetters輔助函數

mapGetters輔助函數僅僅是將store中的getters映射到局部計算屬性：

import {mapGetters} from 'vuex'

export default {
    computed: {
        // 使用對象展開運算符將 getters 混入 computed 對象中
        ...mapGetters([
            'doneTodosCount',
            'anotherGetter'
        ])
    }
}

若是你想講一個getter屬性另去一個名字，使用對象形式：

mapGetters({
    // 映射 this.doneCount 爲 store.getters.doneTodosCount
    doneCount: 'doneTodosCount'
})

未完

以上內容是看到同事在用mapGetters這個方法，忽然想到前面作的Vue項目中並無去嘗試使用一些輔助函數去減小代碼量，因而乎回過頭來再看看Vuex的官網，把內容敲一遍，加深理解。後面項目中若是用到vue，就更加深刻的研究一下Vue以及Vuex的一些彩蛋內容。