5分鐘帶你入門vuex（vue狀態管理）

若是你以前使用過vue.js，你必定知道在vue中各個組件之間傳值的痛苦，在vue中咱們可使用vuex來保存咱們須要管理的狀態值，值一旦被修改，全部引用該值的地方就會自動更新，那麼接下來咱們就來學習一下vuex是如何修改狀態值的：

咱們新建一個vue項目（這裏因爲咱們是講解vuex，因此對於vue項目的建立咱們不會講解太詳細）；在命令行輸入

vue init webpack web（使用webpack建立一個項目名爲web的項目）；

項目建立後，而後安裝vuex，使用命令：npm install vuex --save（安裝vuex保存到本地），安裝成功後你會看到這個界面：

而後咱們執行npm run dev 啓動項目，在瀏覽器輸入："localhost:8080"；正常的話而後咱們會看到項目的啓動頁，

看到這個界面說明項目啓動成功，而後咱們在項目的src目錄下新建一個目錄store，在該目錄下新建一個index.js文件，咱們用來建立vuex實例，而後在該文件中引入vue和vuex，建立Vuex.Store實例保存到變量store中，最後使用export default導出store：

而後咱們在main.js文件中引入該文件，在文件裏面添加 import store from ‘./store’;，再在vue實例全局引入store對象；

而後咱們就能夠開始編寫咱們的vuex業務代碼了，那麼，咱們的數據如何保存？

State：

vuex中的數據源，咱們須要保存的數據就保存在這裏，能夠在頁面經過 this.$store.state來獲取咱們定義的數據；

這時候咱們頁面上就獲得了這個count值1：

Getters：

Getter至關於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算，這裏咱們能夠經過定義vuex的Getter來獲取，Getters 能夠用於監聽、state中的值的變化，返回計算後的結果，這裏咱們修改Hello World.vue文件以下：

再修改index.js文件以下，其中getters中的getStateCount方法接收一個參數state，這個參數就是咱們用來保存數據的那個對象；

而後咱們在頁面顯示：

Mutations：

數據咱們在頁面是獲取到了，可是若是咱們須要修改count值怎麼辦？若是須要修改store中的值惟一的方法就是提交mutation來修改，咱們如今Hello World.vue文件中添加兩個按鈕，一個加1，一個減1；這裏咱們點擊按鈕調用addFun（執行加的方法）和reductionFun（執行減法的方法），而後在裏面直接提交mutations中的方法修改值：

修改index.js文件，添加mutations，在mutations中定義兩個函數，用來對count加1和減1，這裏定義的兩個方法就是上面commit提交的兩個方法以下：

頁面上點擊+、- 按鈕操做數據：

點擊 「+」按鈕

執行成功，咱們再連續點擊三次減 「-」 按鈕

ok！完美。

Actions：

咱們看到，當點擊三次後值從2變成了-1；頁面上的值是改變了；咱們達到了修改store中狀態值的目的，可是，官方並不介意咱們這樣直接去修改store裏面的值，而是讓咱們去提交一個actions，在actions中提交mutation再去修改狀態值，接下來咱們修改index.js文件，先定義actions提交mutation的函數：

而後咱們去修改Hello World.vue文件：

這裏咱們把commit提交mutations修改成使用dispatch來提交actions；咱們點擊頁面，效果是同樣的。

好了，咱們這裏已經實現了一個基本的vuex修改狀態值的完整流程，若是咱們須要指定加減的數值，那麼咱們直接傳入dispatch中的第二個參數，而後在actions中的對應函數中接受參數在傳遞給mutations中的函數進行計算：

這個時候咱們再去點擊「 - 」按鈕就會發現再也不是減1了，而是減去10了。

mapState、mapGetters、mapActions

若是咱們不喜歡這種在頁面上使用「this.$stroe.state.count」和「this.$store.dispatch('funName')」這種很長的寫法，那麼咱們可使用mapState、mapGetters、mapActions就不會這麼麻煩了；

咱們修改Hello World.vue文件以下：

此時咱們在頁面使用count1調用：

正常顯示，效果是同樣的，咱們就能夠再也不使用很長的寫法來調用了。