一起幫忙解決難題,拯救IT 人的一天 | vue context commit
Actions類似於mutations,但仍然有些不同:Action提交(commit)的是mutations,而不是直接變更state。Actions可以包含任意異步操作。使用Actions我們這邊來註冊一個簡單的actionconststore=newVuex.Store({state:{count:0,},mutations:{increment(state){state.count++;},},actions:{increment(context){context.commit(increment)},},});Action函數接受一個與store實例具有相同方法和屬性的context物件,因此你可以調用context.commit提交一個mutation,或是透過context.state或context.getters來取得state和getters。下一章我們介...
Actions 類似於 mutations,但仍然有些不同:
Action 提交(commit)的是 mutations ,而不是直接變更 state。 Actions 可以包含任意異步操作。 使用 Actions我們這邊來註冊一個簡單的 action
const store = new Vuex.Store({ state: { count: 0, }, mutations: { increment(state) { state.count++; }, }, actions: { increment (context) { context.commit(increment) }, }, });Action 函數接受一個與 store 實例具有相同方法和屬性的 context 物件,因此你可以調用 context.commit 提交一個 mutation,或是透過 context.state 或 context.getters 來取得 state 和 getters 。下一章我們介紹 Modules 時,就會對 context 有更多介紹,到時就會知道 context 物件為什麼不是 store 實例本身了。
簡化程式碼在實際情況中,我們常會使用 ES2015 中的 參數解構[1] 來簡化程式碼:
actions: { increment ({ commit }) { commit(increment) } } 調用 ActionsAction 透過 store.dispatch 方法觸發:
store.dispatch(increment)這樣看起來跟 mutations 的用法差不多,但是我們要記得 mutations 必須是同步執行,而 actions 則可以異步執行。
actions: { incrementAsync ({ commit }) { setTimeout(() => { commit(inc...