vuex-第3節：Mutations修改狀態
阿新 • • 發佈：2018-01-22
spa 文件 喜歡 按鈕 div 通過 hub 調用 str
上節課我們學習了怎麽樣讀取state，那今天我們學習一下怎麽樣修改狀態。這個常量我們在第一節課的時候也碰到過，並且進行了加減的操作。那這節課我們就具體學習一下，如何操作Mutations。
$store.commit( )
Vuex提供了commit方法來修改狀態，我們粘貼出第一節課的代碼內容，簡單回顧一下，我們在button上的修改方法。
| 1 2 |
<button @click="$store.commit(‘add‘)">+</button>
<button @click="$store.commit(‘reduce‘)">-</button> |
store.js文件：
| 1 2 3 4 5 6 7 8 | const mutations={ add(state){ state.count++; }, reduce(state){ state.count--; } } |
傳值：
這只是一個最簡單的修改狀態的操作，在實際項目中我們常常需要在修改狀態時傳值。比如上邊的例子，是我們每次只加1，而現在我們要通過所傳的值進行相加。其實我們只需要在Mutations裏再加上一個參數，並在commit的時候傳遞就就可以了。我們來看具體代碼：
現在store.js文件裏給add方法加上一個參數n。添加的地方我已經標黃了。
| 1 2 3 4 5 6 7 8 | const mutations={ add(state,n){ state.count+=n; }, reduce(state){ state.count--; } } |
在Count.vue裏修改按鈕的commit( )方法傳遞的參數，我們傳遞10，意思就是每次加10.
| 1 2 3 4 |
<p>
<button @click="$store.commit(‘add‘,10)">+</button> |
這樣兩個簡單的修改我們就完成了傳值，我們可以在瀏覽器中實驗一下了。
模板獲取Mutations方法
實際開發中我們也不喜歡看到$store.commit( )這樣的方法出現，我們希望跟調用模板裏的方法一樣調用。
例如：@click=”reduce” 就和沒引用vuex插件一樣。
要達到這種寫法，只需要簡單的兩部就可以了：
- 在模板count.vue裏用import 引入我們的mapMutations：
1 import { mapState,mapMutations } from ‘vuex‘;
- 在模板的<script>標簽裏添加methods屬性，並加入mapMutations
1 2 3 methods:mapMutations([ ‘add‘,‘reduce‘ ]),
通過上邊兩部，我們已經可以在模板中直接使用我們的reduce或者add方法了，就像下面這樣。
| 1 | <button @click="reduce">-</button> |
vuex-第3節：Mutations修改狀態