上篇已經簡單介紹了vuex的部署~這篇就講下Vuex的簡單使用吧

store已經掛載在App Vue根元件~因此就可以像在元件中使用router一樣使用store：

獲取state中某個屬性：this.$store.state.name （name為所需的屬性key）

執行一個commit（mutations中的方法）：this.$store.commit('name')  mutations中所定義的名字

執行一個dispatch（就是action中的方法）：this.$stotre.dispatch('name') action中所定義的名字

執行一個getter:this.$store.getter.name，類似於state，主要做的是一些資料格式化處理~ 

在專案中的使用也就是如下啦~~

state一般都會寫在computed屬性中啦~，getter就相當於一個vuex的computed

computed:{
 loading(){
  return this.$store.state.loadingStatus
 }
},
created() {
   this.$stroe.commit('SET_BTNSTYLESBG')
  this.$store.dispatch('getBookId')

}

getter的用法也是類似的了~
但是在一些元件中需要引入很多的state狀態值以及共享資料，甚至一些commit操作的時候，感覺太麻煩了！~有沒有一些簡單便捷的方法?
答案是當然有的啦~輔助函式！vuex官方文件有寫 ~極大程度的提高了開發效率~

state，getter，mutatios，actions每一個都有一個相應的輔助函式~下面就詳細說上一說

一般有兩種方法

import { mapState， mapMutations， mapGetters，mapAction } from ‘vuex’

或者 import * as types from ‘vuex’

 第二種是我喜歡的風格~簡單看著舒服~不過第一種看著更加直接一些！

需要寫的位置依舊不變~只是使用方法稍加變化~！

computed: ...typesState(['name', 'userInfo'])

getter的使用跟上面state的一樣~

created() {

    this.name //就是state中的那麼屬性值！

}

在Vuex有說道，所有正常的狀態改變都必須通過commit來進行提交！（所以不要妄圖去直接修改state中的屬性~這樣也許在非嚴格模式下是可以的~但是一旦出了問題，腦殼兒疼的，因為你會找不到你在哪裡做了操作！）

methods：{

/*這裡就是mutation與action放的位置了*/

    ...types.mapMutations(['a', ''b])

    ...types.mapAction(['c', 'd'])    

    上述寫法也可以修改為一下形式：

    ...types.mapMutations({

        'commitA': 'a'

        'commitB': 'b'

    })

    ...types.mapAction({

        'actoinC': 'c',

        'actionD'：'d'

    })

}

這種寫法相當於將commitA 對映為a，actionC對映為c，使用是可以直接進行替換~

mounted: {

    /*data就是commit時候所提交的資料，這是使用我們在methods中引入的action，mutation方法了*/

    this.a(data)      ------------------------------- this.commitA(data)

    this.c（data） -------------------------------  tihs.actionC(data)

}

是不是瞬間覺得簡單了很多呢~