[Vue.js] Vuex 學習筆記(7) | vue mutation map
![[Vue.js] Vuex 學習筆記(7)](https://i.imgur.com/axBPWDg.jpg)
提交mutations是改變Vuex中store的唯一方式。mutations非常類似於組件中的事件(event),每個mutation都有一個字串的事件類型(type)和一個回調函數(handler),handler就是我們實際進行狀態更改的地方,並且他會接受state作為第一個參數。1234567891011conststore=newVuex.Store({state:{count:1},mutations:{increment(state){state.count++;}}});我們不能像調用state一樣調用mutations,而是要以store.commit的方法來做呼叫。1store.commit(increment);提交PayLoad我們可以在store.commit傳入額外的參數12345mutations:{increment(s...
![[Vue.js] Vuex 學習筆記(7)](http://pix4.agoda.net/hotelimages/agoda-homes/5899847/61e1a790eeb181e40e8f262ea5a396dc.jpg?s=800x)
提交 mutations 是改變 Vuex 中 store 的唯一方式。 mutations 非常類似於組件中的事件(event),每個 mutation 都有一個字串的 事件類型 (type) 和一個回調函數 (handler), handler 就是我們實際進行狀態更改的地方,並且他會接受 state 作為第一個參數。
1234567891011const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment(state) { state.count++; } }});我們不能 像調用 state 一樣調用 mutations ,而是要以 store.commit 的方法來做呼叫。
1store.commit(increment);提交 PayLoad我們可以在 store.commit 傳入額外的參數
12345mutations: { increment (state, n) { state.count += n }}1store.commit(increment, 10)在多數情況下, payload 應該是一個物件,這樣就可以包含更多的資料。
12345mutations: { increment (state, payload) { state.count += payload.amount }}123store.commit(increment, { amount: 10})物件風格的 commit 方式我們可以在物件中使用 type 來指定對應的 mutations。
1234store.commit({ type: increment, amount: 10})Mutations 遵守 Vue 的響應規則因為 Vuex 中的 store 的 state 是響應式的,那麼當我們變更 state 時,監控 state 的組件也會自動更新,這也意味著 Vuex 中的 mutations 也需要與使用 Vue 一樣遵守下列的注意事項:
最好提前在 store 中初始化好所有...取得本站獨家住宿推薦 15%OFF 訂房優惠
本站住宿推薦 20%OFF 訂房優惠,親子優惠,住宿折扣,限時回饋,平日促銷
Mutations | vue mutation map
Actions | vue mutation map
Modules | vue mutation map
State | vue mutation map
Vuex mapMutations - How does it work? | vue mutation map
How can I mutate my module store state using map mutations from a ... | vue mutation map
Vuex Map Helpers | vue mutation map
vuex-map | vue mutation map
maoberlehnervuex-map-fields: Enable two | vue mutation map
[Vue.js] Vuex 學習筆記(7) | vue mutation map
Best practices for Vuex mapping | vue mutation map
Vuejs : mapMutations | vue mutation map
vuex (2) | vue mutation map
![](https://i.imgur.com/axBPWDg.jpg)