如果你之前使用過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調用：
正常顯示，效果是一樣的，我們就可以不再使用很長的寫法來調用了。
更多前端學習資源請點擊：史上最全web前端資料總結