假如用王者榮耀的方式學習Vuex

英雄介紹

維佑·愛克斯是魯班大師創造出來的三代機器人，目前負責稷下學院負責學院物資分配工做，他採用集中式存儲管理着學院的全部的物資，並以相應的規則保證物資以一種可預測的方式發生變化。

姓名：維佑·愛克斯（vuex）

熱度排名：T0

勝率：95%

登場率：90%（中大型項目100%）

Ban率：0%

技能：

State（單一狀態樹）

被動：cd0秒 消耗0 愛克斯使用State來保存着整個學院的所有物資數據，它做爲惟一狀態源而存在，爲愛克斯提供能量。若被強制破壞更改則對地方英雄形成n+1bug的傷害。

Getter（計算屬性）

愛克斯有着超出常人的大腦從而使他的計算能力十分出衆，經過使用Getter能夠處理state派生的狀態，他的返回值會根據依賴緩存起來，當依賴值發生變化纔會從新計算。此技能每秒鐘對己方英雄形成100%恢復效果。

Mutation（出爾反爾）

定義State數據後，更改State中狀態的惟一方法就是釋放mutation，mutation接受state做爲第一個參數，調用mutation中的事件須要使用commit方法。須要注意的是mutation必須是同步釋放，不然將減小自身20%髮量。

Action（異步操做）

與mutation不一樣action是一個可異步釋放的技能，經過傳入context調用commit提交一個mutation，而非直接變動state狀態。此技能愛克斯須要修煉dispatch才能夠進行觸發。對己方範圍內的全部英雄形成200%的移速加成。

Module（多重影分身）

愛克斯經過modules，能夠將store分割成模塊。每一個模塊擁有本身的state等屬性；

出裝：

mapState：

使用mapState輔助函數，mapState是vuex中的函數，須要單獨引入，使用方法有不少種； * 箭頭函數返回 count: state => state.count * countAlias傳遞字符串參數 countAlias: 'count' * 傳入數組 computed: mapState([ // 映射 this.count 爲 store.state.count 'count' ])

mapMutation：

使用mapMutation輔助函數能夠在組件內獲取motation裏的方法

methods:{
...mapMutations([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`
    ]),
}
複製代碼

mapActions：

使用mapActions輔助函數能夠在組件內獲取action裏的方法

methods: {
    ...mapActions([
      'increment', // 將 `this.increment()` 映射爲 `this.$store.dispatch('increment')`

      // `mapActions` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.dispatch('increment')`
    })
  }
複製代碼

dispatch:

dispatch用來分發Action方法

store.dispatch('increment')
複製代碼

commit：

commit用來提交mutation方法

store.commit('increment')
複製代碼

愛克斯的我的原則：

• 應用層級的狀態應該集中到單個 store 對象中。

• 提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。

• 異步邏輯都應該封裝到 action 裏面。

愛克斯如何處理表單：

1. 綁定value，而後監聽輸入，監聽事件內調用commit方法觸發mutation更改對應state

<!--view-->
<input :value="message" @input="updateMessage">
<!--methods-->
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}
複製代碼

2. 使用computed計算屬性 的get和set方法作對應處理

<input v-model="message">
複製代碼

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
複製代碼

本期英雄介紹完畢，祝你們早日國服王者，咱們下期見。