iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

菜菜菜的 Vue 30天系列 第 27

Vuex(mutations)

菜菜菜的 Vue 30天 - Day27

好咧~前一章介紹了 state 以及 getters 了。

今天這章來介紹 mutations 及 actions

mutations

上一章有介紹了 state 是一個 Vuex 統一存放資料的地方,而我們介紹了如何取值,至於修改 state 的部份我們就必須透過呼叫 mutations 來執行 state 的修改。

那怎麼做呢?!如下:

我們先建立了一個 state 叫做 count,那我們每呼叫一次 mutations 就讓 count +1。

addCount 這個 mutations 我們帶入參數 state,這樣就能對 state 裡的 count 執行 +1 的動作了。

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

至於呼叫 mutations 的部分,我們就能在 Vue 裡面使用 commit 來執行呼叫:

this.$store.commit('addCount');

另外我們如果要將其它的資料修改進 state 的話,commit 能夠再帶入第 2 個參數(payload),如下:

this.$store.commit('addCount', 99);
//or
this.$store.commit('addCount', {
    amount: 99
});
//or
this.$store.commit({
    type: 'addCount',
    amount: 99
});

在 mutations 裡面就能這樣子使用:

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

注意

最後使用 mutations 有一點非常的重要!!

就是在使用 mutations 時只能夠執行同步的操作。

若要執行非同步操作的話就要使用 actions,這部分我們就在下一章作介紹~


上一篇
Vuex(安裝、引入、state 及 getters)
下一篇
Vuex(actions)
系列文
菜菜菜的 Vue 30天30

尚未有邦友留言

立即登入留言