超緊繃!30天Vue.js學習日記 擁抱全家桶系列-東西太多?蓋個倉庫通通塞進去吧!(2)

大家好,接續昨天的主題,我們繼續探討Vuex的基本核心:D

#actions

由於mutation並不支援異步操作,所以產生了action,不過action不能直接改變state,而是可以透過觸發mutation去改變state的值。

const store = new Vuex.Store({
state: {
    todos: [
      { id: 1, text: '123', done: true }
    ],
    count:0
  },
mutations: {
    increment(state) {
      state.count++
    }
  } ,
  actions: {
    increment2 (context) {
      context.commit('increment')
    }
  }
})

mapActions輔助函式

這邊的用法跟mapGetters差不多,不過我們是將action的內容投射到vue實例中的methods:

new Vue({
	el:'#app',
	store,
	methods:{
		...Vuex.mapActions([
			'increment2'
			])
	}
})

<button @click="increment">+1</button>

補充:

由於此範例是我直接使用html檔案進行編輯,若今天我們使用vue-cli開發webpack專案,我們需要在用到輔助函式的組件內使用import喔!

import { mapActions } from 'vuex'
import { mapGetters } from 'vuex'

然後在使用輔助函式時也不需要像前面的範例一樣使用Vuex.mapActions
可以去除掉Vuex,像是這樣:

methods:{
		...mapActions([
			'increment2'
			])
	}

在上述範例中,我們在action內的increment2中使用context.commit('')去呼叫mutations內的increment

在知道action如何呼叫mutations後,我們也要知道action內的函式要如何呼叫:

<button @click="store.dispatch('increment2')">+1</button>

呼叫action內的函式必須使用store.dispatch('')

#module

將store模組化

這邊我是直接附上官方文件的範例:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

本日範例下載:
https://drive.google.com/open?id=1fJprKJa9QX7WjQfrLggTVbDn7QFiBNm3

這30天的教學就到這邊結束了,如果對於vue有興趣想要進行更深入的研究,可以去追其他大神的技術部落,或是把官方的文件全部嗑完,畢竟30天時間有限,沒能把每個主題都進行深入探討