2020-07-19

4 分鐘閱讀文 (大約 662 個字)

Vuex官方文檔閱讀筆記 - actions

之前的Vuex官方文檔筆記沒有寫完，來慢慢補上。

核心觀念 - Action

Action類似mutation是一個事件，它可以處理異步函式（http請求/setTimeout…），但是他不會直接變更資料狀態，而是會提交到mutation，讓mutation進行資料狀態的更改。

使用方式 - 類似Mutation需要先註冊
store/index.js

const store = new Vuex.Store({
    state:{
        count:0
    },
    mutations:{
    //根據官方文檔的建議，這裡使用全大寫的常數命名模式，但你不一定要這麼做
        INCREMENT(state){
            state.count++
        }
    },
    actions: {
        //事件名稱(type)　context參數
        increment(context){
            context.commit('increment')
        }
    }
})

action中的事件要接收的第一個參數必定為context，這是一個跟store共享方法和屬性的物件，也就是說你也可以透過這個context取得store中的getter或state資料
我們使用context.commit('mutation type(mutation名稱)')來向mutation提交變更資料狀態的請求。

1
2
3

context.getters
contetxt.state
context.commit('MUTATION_NAME')

注意，context並不等同於store本身，這跟Vuex的模組化有關

如何使用Action？
透過store.dispatch(‘action name’)來觸發action。

使用

store.dispatch('action-name')

//也可以傳參數(payload)

store.dispatch('INCREMENT',{
    amount: 10
})

store.dispatch({
    type:'INCREMENT',
    amount: 10
})

輔助函式 - mapActions

在組件中若需要使用多個action，可以使用mapActions

元件

import { mapActions } from 'vuex'

export default {
    //....some code
    methods: {
        //方法內使用
        some_function(){
            this.$store.dispatch('action-name')
        },
        //mapAction
        ...mapActions([
            'increment', //使用方式: this.increment()
            //傳參數payload
            'incrementBy' //使用方式: this.incrementBy(payload)
        ])
        
    }
}

Action中的異步處理(Ajax)

store.dispatch是可以處理Promise的，它也可以回傳promise物件

store/index.js


actions:{
    //抽出context物件中的commit方法, 精簡程式碼
    actionA({commit}){
    //模擬一個異步行為，一秒後完成這個promise並觸發一個mutation
        return new Promise((resolve, reject) =>{
            setTimeout(()=>{
                commit('MUTATION')
                resolve()
            }, 1000)
        })
    }
}

在元件中使用

1
2
3

this.$store.dispatch('actionA').then(() =>{
    //...some code
})

由於actionA會回傳一個promise物件，你可以用then將行為都串起來

在另一個action中觸發另一個ajax行為並做後續行為
store/index.js

actions: {
    //為了觸發另一個action，需要使用context下的dispatch
    actionB({dispatch, commit}){
        return dispatch('actionA').then(()=>{
            commit('MUTATION')
        })
    }
}

actionB會觸發actionA，等到actionA內的Promise被resolve，就進行mutation
使用ES7的Async/Await改寫

store/index.js

//getData()和getOtherData()皆會在取得資料後回傳Promise物件
actions:{
    async actionA({commit}){
        //等到getData完成後，就進行mutation
        commit('gotData', await getData())
    },
    async actionB({dispatch, commit}){
        //觸發actionA事件，等它內部的promise回傳
        await dispatch('actionA')
        commit('gotOtherData', await getOtherData())
    }
}

參考資料

官方文檔

# Vue, Vuex, 閱讀筆記

Vuex官方文檔閱讀筆記 - actions

核心觀念 - Action

輔助函式 - mapActions

Action中的異步處理(Ajax)

參考資料

文章目錄

Your browser is out-of-date!