Day 30 Vuex Mutations介紹 / 鐵人賽心得

第 11 屆 iThome 鐵人賽

DAY 30

自我挑戰組

前端新手筆記-Vue.js系列第 30 篇

11th鐵人賽 vuex

chunwen

2019-10-16 22:40:24

2094 瀏覽

分享至

前言

昨天介紹到 Vuex Getter 方法使用，那今天就接著介紹 Mutations 用法，那我們就開始摟～對了附註一提，這系列文章沒意外的話，我應該就繼續寫下去啦，畢竟我Vuex都還沒有介紹完XD。

另外，這篇文最後也會附上板上其他大大撰寫關於Vue.js文章列表，也歡迎大家滑到最後慢慢看！

開始前，先附上Vuex 執行過程圖

Vuex Mutations 用法介紹

Mutations有幾個重要特點（請先記得）：
1.唯一可以改變 State 內容的入口(可以操作資料狀態的入口)
2.處理的所有行為都是同步
3. Mutations 無法直接呼叫，需要透過 store.commit()

接著，我們到官網看一下，mutations該如何使用？官網內容提到

Vuex中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的事件類型(type)和一個回調函數(handler)。而 handler 就是我們實際進行狀態更改的地方

OK，所以什麼是事件類型？與回調函數呢？我們透過下方範例來認識一下
補充一點：我們使用 mutations 時會搭配 actions 使用，但下方例子只是為了介紹 mutations 所以就先省略 actions摟～
範例：

const store = new Vuex.Store({
   state:{
      count:0
   },
   mutations:{
                  // state是預設第一個參數      
                  // payload翻譯為載荷，就是傳入的參數
     mut_increase(state, payload){
        //直接修改state狀態
        state.count++;
     }
   }
})

說明：
mut_increase 指的就是事件
state.count++ 指的就是回調函數

補充：呼叫 mutations 注意項目

官網提到我們不能直接調用一個mutation handler，因此我們需要透過store.commit方法來呼叫
寫法範例：store.commit('increment')

補充：payload載荷

我們傳入的參數可以為一個物件官網範例如下：

// ...
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}
store.commit('increment', {
  amount: 10
})

使用常量替代 Mutation 事件類型

基本上就是把命名名稱全改為大寫，目的就是方便對辨識 Mutation，但如果你不喜歡，其實也可以忽略這種寫法～
官網範例：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我们可以使用 ES2015 风格的计算属性命名功能来使用一个常量作为函数名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})