Vue.js 是一個流行的 JavaScript 前端開發框架。其中最核心的概念之一便是 Vuex,即 Vue 的狀態管理模式。Vuex 表示虛擬 DOM,所以當用戶操作站點時,不會導致一些不必要的重新渲染,頁面交互更加順暢。Vuex可以幫助開發者在應用程序中更新,管理和維護狀態。該狀態可以是任何的東西(例如用戶、頁面、本地數據等)。
為了更好地控制狀態,在Vuex中提供了一個稱為 Action 的概念。在 Vuex 中,Action 可以看作是對 Mutation 的間接使用。顧名思義,Action 是用于處理異步操作的。比如:從 API 獲取數據。但是,修改 Vuex 狀態只能通過提交 Mutation 來實現,因此,我們需要 Action 來封裝一些異步操作。
const actions = { async FETCH_USER({ commit }, userId) { const response = await getUser(userId) commit('ADD_USER', response.data) } }
上述代碼是一個使用 Action 的示例,其中 FETCH_USER 表示 Action 名稱。當被觸發時,它會從 API 獲取指定用戶的數據。如果操作成功,則會調用 ADD_USER mutation 來更新 Vuex 狀態。Action 通常需要使用的參數是 store 對象(即要更新狀態的狀態對象)和一個負載(即接收到的參數)。
另外應該注意的是,Action 必須返回一個 Promise 對象,以便在異步操作完成時可以處理響應。在上面的示例中,我們使用異步函數來實現。由于它返回一個 Promise,因此在 Action 中使用 async/await語句是很方便的。
綜上所述,Action 是 Vuex 狀態管理中不可或缺的一部分,它封裝了異步操作并調用 Mutation 進行狀態更新。在 Vuex 中,通過有效使用 Action 和 Mutation,可以更好地組織代碼,提高應用程序的可維護性和可擴展性。