image

先說(shuō)兩句

上一講 「Vuex 到底是個(gè)什么鬼」，已經(jīng)完美詮釋了 Vuex 的牛逼技能之所在（純屬自嗨）。如果把 Vuex 比喻成農(nóng)藥里面的劉備，那就相當(dāng)于你現(xiàn)在已經(jīng)知道了劉備他是一個(gè)會(huì)打槍的力量型英雄，而且他打的槍還是雙排量的，認(rèn)識(shí)到這一點(diǎn)后，那么接下來(lái)就是要了解他到底是如何打槍的，是左手打，還是右手打，還是雙手一起端著槍打？

同樣，我們已經(jīng)知道了 Vuex 就如同一個(gè)全局的管理員一樣，幫著我們統(tǒng)一管理著項(xiàng)目的共享數(shù)據(jù)，那它到底是通過(guò)什么樣的方式去管理的呢？我們應(yīng)該如何與這個(gè)管理員進(jìn)行溝通和交流，才能有效的訪問(wèn)和操作這些共享數(shù)據(jù)呢？

再說(shuō)一句

Vuex 的內(nèi)臟由五部分組成：State、Getter、Mutation、Action 和 Module。關(guān)于這五個(gè)部分，我會(huì)分為多個(gè)章節(jié)來(lái)進(jìn)行詳細(xì)闡述，這一講就先和大家一起徹底搞定 State 和 Getter。

當(dāng)然，在實(shí)際應(yīng)用中，這五個(gè)部分并不是必須的，你需要用到什么就添加什么。但是一般再怎么簡(jiǎn)單的 Vuex，也至少會(huì)由 State 和 Mutation 構(gòu)成，否則你就該考慮 Vuex 是否有存在的必要了。

最后，溫馨提示，文檔示例代碼使用了 ES2015 的語(yǔ)法，如果你還沒(méi)了解過(guò)的話，先戳此了解了解。

單一狀態(tài)樹

Vuex 使用的是「單一狀態(tài)樹」，根據(jù)官方的描述，可能有點(diǎn)懵圈，不過(guò)沒(méi)關(guān)系，這里我們一起來(lái)詳細(xì)了解下到底什么是「單一狀態(tài)樹」。拋開單一狀態(tài)，我們先來(lái)看一下這里的樹是什么意思。

image

如上圖是一個(gè)公司的組織架構(gòu)，它的這種層級(jí)其實(shí)就屬于一種樹形的結(jié)構(gòu)，總經(jīng)理就是樹的主干，其他各部門或者職業(yè)，都屬于樹的分支。

一般情況下，一個(gè)公司只會(huì)有這么一個(gè)樹形架構(gòu)，如果有兩個(gè)平等的總經(jīng)理，那么公司在管理上很可能就會(huì)出現(xiàn)矛盾，下面的人到底聽誰(shuí)的呢，是吧！

好，現(xiàn)在咱們?cè)賮?lái)看下官方所敘述的「單一狀態(tài)樹」：

1、用一個(gè)對(duì)象（主干）就包含了全部的（分支）應(yīng)用層級(jí)狀態(tài)。
2、每個(gè)應(yīng)用（公司）將僅僅包含一個(gè) store 實(shí)例對(duì)象（主干）。

單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

State

我們?cè)倩剡^(guò)頭來(lái)看一下之前那個(gè)簡(jiǎn)單的 Store 示例代碼：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  }
})

那么我們?nèi)绾卧?Vue 組件中展示狀態(tài)呢？由于 Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的，從 store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法就是在計(jì)算屬性中返回某個(gè)狀態(tài)，如下：

// 創(chuàng)建一個(gè) Counter 組件
const Counter = {
  data() { return {} },
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}

每當(dāng) store.state.count 變化的時(shí)候, 都會(huì)重新求取計(jì)算屬性，并刷新界面。

需要注意的是，如果你把 store.state.count 放在 data 中， store.state.count 的變化是不會(huì)主動(dòng)觸發(fā)界面刷新的，當(dāng)然，也不能直接這樣：<div>{{ store.state.count }}</div> ，因?yàn)樵谀０逯惺菬o(wú)法直接訪問(wèn)到 store 對(duì)象的，所以這樣寫無(wú)疑會(huì)報(bào)錯(cuò)。

這種模式依賴于全局的管理員 store，如果模塊多了，意味著每個(gè)模塊或者頁(yè)面只要用到了這個(gè) state 里面的數(shù)據(jù)，都得把 store 引入進(jìn)來(lái)，這樣的操作確實(shí)有點(diǎn)難受。當(dāng)然，官方肯定是不允許有這樣令人抓狂的操作出現(xiàn)的：

Vuex 通過(guò) store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件 “注入” 到每一個(gè)子組件中（需調(diào)用 Vue.use(Vuex)）：

const app = new Vue({
  el: '#app',
  // 把 store 對(duì)象提供給 “store” 選項(xiàng)，
  // 這可以把 store 的實(shí)例注入所有的子組件
  store,
  // 子組件
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通過(guò)在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store 實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過(guò) this.$store 訪問(wèn)到。讓我們更新下 Counter 的實(shí)現(xiàn)：

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

Vuex 的狀態(tài)固然好用，但是也不要濫用：

使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會(huì)使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會(huì)使代碼變得冗長(zhǎng)和不直觀。如果有些狀態(tài)嚴(yán)格屬于單個(gè)組件，最好還是作為組件的局部狀態(tài)。你應(yīng)該根據(jù)你的應(yīng)用開發(fā)需要進(jìn)行權(quán)衡和確定。

Getter

有時(shí)候，我們會(huì)發(fā)現(xiàn) State 中的數(shù)據(jù)，并不是我們直接想要的，而是需要經(jīng)過(guò)相應(yīng)的處理后，才能滿足我們的需求。

比如在一個(gè)組件中，我們需要把 state 中的日期 date 轉(zhuǎn)換成星期幾來(lái)展示：

computed: {
  weekDate () {
    return moment(this.$store.state.date).format('dddd'); 
  }
}

注意：這里的 moment 是一個(gè)第三方日期處理類庫(kù)，使用之前需要導(dǎo)入。

如果只有一個(gè)組件需要這樣做還好，但如果在很多組件中，都需要這么轉(zhuǎn)換的話，那就得在每一個(gè)組件中都需要把這個(gè)函數(shù)復(fù)制過(guò)去。而且，一旦產(chǎn)品經(jīng)理心情不好，不想用星期幾來(lái)顯示，想直接用 2018-10-30 11:12:23 這種方式來(lái)顯示日期，那你就得在所有用到它的組件中去更改日期格式化的方法，豈不難受至極。就算你把它單獨(dú)抽取出來(lái)作為一個(gè)公共的函數(shù)，各種導(dǎo)入也麻煩，最重要的是不好統(tǒng)一管理。

所以，這個(gè)時(shí)候，Vuex 又引入了一個(gè)牛逼的玩意兒，Getter。我們可以把它當(dāng)成 store 中的計(jì)算屬性（computed）。

就像計(jì)算屬性一樣，getter 的返回值會(huì)根據(jù)它的依賴被緩存起來(lái)，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

我們看看這兩個(gè)例子，著重注意下里面的注釋：

const store = new Vuex.Store({
  state: {
    date: new Date()
  },
  getters: {
    // Getter 接受 state 作為其第一個(gè)參數(shù)
    weekDate: state => {
      return moment(state.date).format('dddd'); 
    }
  }
})

getters: {
  // Getter 還也可以接收 getters 作為第二個(gè)參數(shù)
  dateLength: (state, getters) => {
    return getters.weekDate.length;
  }
}

不但如此，Getter 還會(huì)將 store.getters 對(duì)象暴露出去，你可以以屬性的形式訪問(wèn)這些值：

console.log(store.getters.weekDate)

我們可以很容易地在任何組件中使用它：

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

現(xiàn)在需求又變了，每個(gè)模塊要顯示的 weekDate 的格式不一樣，有的顯示全部日期，有的需要顯示星期幾，怎么辦？

好辦，那就給 Getter 傳參唄，但是怎么傳呢？

因?yàn)?Getter 在通過(guò)屬性訪問(wèn)時(shí)是作為 Vue 的響應(yīng)式系統(tǒng)的一部分緩存其中的，所以是不能直接 store.getters.weekDate('MM Do YY')，因?yàn)?weekDate 并不是一個(gè)函數(shù)，它僅僅只是一個(gè)屬性而已。

那么既然屬性不能傳參，怎么辦呢？那我們就想辦法把這個(gè)屬性變成一個(gè)函數(shù)不就行了。

getters: {
  // 返回一個(gè)函數(shù)，就可以傳參了
  weekDate: (state) => (fm) => {
    return moment(state.date).format(fm ? fm : 'dddd'); 
  }
}

使用如下：

store.getters.weekDate('MM Do YY')

寫在最后

可能看過(guò)官方文檔的童鞋會(huì)好奇，為什么沒(méi)有講解那些輔助函數(shù)，比如 mapState、mapGetters。別擔(dān)心，后面會(huì)有專門的一個(gè)章節(jié)來(lái)進(jìn)行講解，因?yàn)槲野l(fā)現(xiàn)這些輔助函數(shù)（包括后面的 mapMutations 和 mapActions）都是為了解決同一個(gè)問(wèn)題而生，只是形式不同罷了，所以還不如拆出來(lái)一起講，或許效果會(huì)更好。

對(duì)于官方我個(gè)人覺(jué)得寫得比較通俗易懂的地方，就直接引用了進(jìn)來(lái)。如果有疑問(wèn)或者對(duì)于我的理解有疑問(wèn)的地方，歡迎留言。