Actions

Action 類似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作。

讓我們來注冊一個簡單的 action,實踐中，我們會經(jīng)常會用到 ES2015 的?參數(shù)解構(gòu)?來簡化代碼（特別是我們需要調(diào)用?commit?很多次的時候）：

actions: {increment ({ commit }) { commit('increment') } }

看下我們項目中的actions:

怎么在組件中分發(fā)事件呢？

看下我們的Toolbar.vue代碼

首先引入mapActions?輔助函數(shù)將組件的 methods 映射為?store.dispatch?，

映射 addNote() 為 this.$store.dispatch('addNote')，對應(yīng)actions中的addNote。

使用actions的優(yōu)點不只在于簡化代碼，更重要的在于我們可以在 action 內(nèi)部執(zhí)行異步操作。

?mutation 有必須同步執(zhí)行這個限制。Action 就不受約束：

actions: {incrementAsync ({ commit }) {setTimeout(() => {commit('increment')}, 1000)} }

這是mutation無法做到的。

至此我們的整個應(yīng)用已經(jīng)完成。

附上完整項目github地址

?

轉(zhuǎn)載于:https://www.cnblogs.com/herozhou/p/7029348.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的vuex实践之路——笔记本应用（三）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。