vuex在action中提交commit異步事件問題

在開發過程中遇到一個問題，就是在action中提交的commit執行是異步事件。

先看代碼：

// action.js
sign_in({ commit }, user) {
    // 觸發登錄狀態
    commit({
      type: 'sigin_in',
      payload : {
          user  
      }
    });
    console.log("++++++");
},



// mutations.js
async sigin_in(state, { payload }) {
    await axios.post("api/login",payload.user);

    console.log("------");
}


//輸出
++++++
------

如上所示，如果在mutations中使用async/await的話就會使得commit變成異步函數。

解決辦法：

一、將axios異步進程放在action中執行。

二、不要使用async/await，在axios的then中進行業務邏輯，代碼如下：

sigin_in(state, { payload }) {
    axios.post("api/login",payload.user).then(res => {
        // do somthing...
        
    });
}

官方的說法是不建議將異步事件放在mutations中執行，但如果情況特殊，只能在mutations中進行異步的話只有使用上面的方法了。