Actions

Action 類似于 mutation，不同在于：

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

讓我們來注冊一個簡單的 action,實踐中，我們會經常會用到 ES2015 的?參數解構?來簡化代碼（特別是我們需要調用?commit?很多次的時候）：

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

看下我們項目中的actions:

怎么在組件中分發事件呢？

看下我們的Toolbar.vue代碼

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

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

使用actions的優點不只在于簡化代碼，更重要的在于我們可以在 action 內部執行異步操作。

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

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

這是mutation無法做到的。

至此我們的整個應用已經完成。

附上完整項目github地址

?

轉載于:https://www.cnblogs.com/herozhou/p/7029348.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。