Vuex 變更狀態的 Mutations

在Vuex有四大物件元素，分別是State、Mutations、Getters、Actions

每個 Mutations 都包含了兩個要素：

函式名字
函式內的功能

而寫在Mutations內的函式，是唯一能直接改變State的值的Vuex方法。例如先前Vuex 引入與範例筆記的 store.js


const store = new Vuex.Store({
 state:{
 count:0,
 },
 mutations:{
 addCount(state){
 state.count += 1;
 }
 }
});

我們不該在mutations內突然使用個我們沒在state宣告的屬性(值)，想要這麼做要在mutations寫

Vue.set(state,’資料名稱’,’ ‘值');

在mutations內動態用vuex的set去新增state的內容

如果是要新增state內物件的新屬性也可以用這種方式

const store = new Vuex.Store({
 state:{
 count:0,
 box:{
 text:'', 
 }
 },
 mutations:{
 addCount(state){
 state.count += 1;
 //Vue.set(state,’資料名稱’,’ ‘值’);
 Vue.set(state.box,’val’,’ 100);
 }
 }
});

這個一來就會在state內的物件box，新增一個屬性val，其值是數值100

另外，當我們在(.vue)組件要使用mutations定義的方法，例如app.vue的<script>

export default {
 computed:{
 numberView(){
 return this.$store.state.count;
 }
 },
 methods:{
 addCount(){
 this.$[store.commit](http://store.commit)('addCount')
 }
 }
}

實際上要呼喚mutations的方法，開頭先找到vuex（譬如這裡是this.$store，可以去看先前筆記）

接著要用

commit('mutations的方法名稱')

注意 commit( ) 內要放字串，這個字串名稱會對應觸發到 mutations 內的方法名稱

也就是

commit('addCount’)

會觸發 mutations 內 addCount(state)

const store = new Vuex.Store({
 state:{
 count:0,
 },
 mutations:{
 addCount(state){ //<----會被commit('addCount’)觸發呼叫，視同addCount(state)
 state.count += 1;
 }
 }
});

addCount(state) 的 state 來自 store內的 state，如果要多加其他參數也可以

 mutations:{
 addCount(state,x){
 state.count += x;
 }
 }

那麼 (.vue) 組件的 <script> 內的 methods

addCount(){
 this.$[store.commit](http://store.commit)(‘addCount’,100)
}

就會對應到

commit('方法名稱',第二個參數)

第二個參數這裡是帶入100

這麼一來當組件 methods 的 addCount() 被呼叫， this.$store 會 commit 觸發Vuex內mutations的addCount方法並且帶入其他參數，這裡帶入100會對應到mutations的addCount(state,x)的x參數

commit要帶入其他參數也可以，但第二個參數是留給要傳入的值，它會對應到mutations內方法的第二個參數(第一個參數是state) 第三個參數的部分在模組化筆記會說明

commit除了可以帶很多參數外，也可以直接帶入一個物件要帶物件的話要這樣寫

addCount(){
 this.$[store.commit](http://store.commit)({
 type:'方法名稱’,
 自訂屬性：自訂值,
 自訂屬性：自訂值,
 自訂屬性：自訂值,
 })
}

commit帶入物件，物件要有個屬性type type的值是字串，會對應到mutations內方法名稱，其他屬性和值可以自訂，也就是說這樣寫

addCount(){
 this.$[store.commit](http://store.commit)('addCount')
}

等於這樣寫

addCount(){
 this.$[store.commit](http://store.commit)({
 type:'addCount'
 })
}

那如果物件除了type有其他屬性值，例如val是數值100

addCount(){
 this.$[store.commit](http://store.commit)({
 type:'addCount',
 val:100
 })
}

在mutations要取得這個val，就是第二個參數.屬性名

 mutations:{
  addCount(state,x){
 state.count += x.val;
 }
 }

這裡就是x.val，等同取用到commit物件的val屬性

如果要讀取的mutations變多，寫在組件的methods方法太多，會有點麻煩，如同vuex替state準備了mapState方法 Vuex也替mutations提供了mapMutations方法

要使用一樣是在 (.vue組件)的<script>開頭引入

import mapMutations from ‘vuex'

但是vuex有提供不少方法，例如mapState，要一起引入我們會這樣寫

import { mapState, mapMutations  } from 'vuex'

接著在 (.vue組件)的<script>可以改成

export default {
 computed:mapState( [ 'count' ] ),
 methods:mapMutations( [ 'addCount' ] )
}

這樣精簡多了，這種寫法我們一樣可以帶其他參數進去 store.js的mutations內addCount(state)改成addCount(state,x){


import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
 state:{
 count:0,
 },
 mutations:{
 addCount(state,x){
 state.count += x;
 }
 }
});
export default store;

那實際呼叫要怎麼帶入x參數？回到 app(.vue組件)的<template>

 <div>
 <h1>{{count}}</h1>
 <button @click="addCount(2)">+</button>
 </div>

@click=“addCount"等於點擊時觸發addCount

我們多加( 參數 )會等於呼叫函式時多帶入參數進去，也就addCount(2)的2會對應到的 x 囉

 mutations:{
 addCount(state,x){
 state.count += x;
 }
 }

最後，最重要的是 Mutations只能做同步的操作， Mutations不能寫非同步、AJAX等promise、callback等操作

Vuex 變更狀態的 Mutations

Written by:

SimonAllen