如果你之前使用過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調用：
正常顯示，效果是一樣的，我們就可以不再使用很長的寫法來調用了。