【快速入門Vue系列】第四十篇:Vuex的Action和Module的應用(系列完結篇)

語言: CN / TW / HK

theme: qklhk-chocolate

  • 這是我參與11月更文挑戰的第27天,活動詳情檢視:2021最後一次更文挑戰

    首先要真心感謝一直支援我到現在的粉絲,也感謝掘金能給我這麼一個分享的平臺,寫作期間收穫了我的小粉絲,也感受到了創作的快樂,小夥伴們到這裡我們就完結了,有哪裡不懂或者不好的地方歡迎指正哦,也恭喜能看到現在的小夥伴,文末博主也準備了獎勵哦!願你歷經千帆歸來仍是少年

Vuex_Action

Action 類似於 mutation,不同在於:

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

Action 函式接受一個與 store 例項具有相同方法和屬性的 context 物件,因此你可以呼叫 context.commit 提交一個 mutation,或者通過 context.state 和 context.getters 來獲取 state 和 getters:

js const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } })

分發Action

js store.dispatch('increment')

雖然和mutation差不多,但是在action中,可以執行非同步操作,但是mutation中不行!!!

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

組合 Action

Action 通常是非同步的,那麼如何知道 action 什麼時候結束呢?

js actions: { actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) } }

js store.dispatch('actionA').then(() => { // ... })

Vuex 管理模式

Vuex_Module

由於使用單一狀態樹,應用的所有狀態會集中到一個比較大的物件。當應用變得非常複雜時,store 物件就有可能變得相當臃腫。

為了解決以上問題,Vuex 允許我們將 store 分割成模組(module)。每個模組擁有自己的 state、mutation、action、getter。

js modules: { a, b }

  • 獲取 state:this.$store.state.moduleName.xxx
  • 獲取 getter:this.$store.getters.xxx
  • 提交 mutation:this.$store.commit('xxx');
  • 分發 action:this.$store.dispatch('xxx');
  • 可以通過mapXXX的方式拿到getters、mutations、actions,但是不能拿到state,如果想通過這種方式獲得state,需要加名稱空間。

名稱空間

可以通過新增 namespaced: true 的方式使其成為帶名稱空間的模組。

  • 獲取 state:this.$store.state.moduleName.xxx
  • 獲取 getter:this.$store.['moduleName/getters'].xxx
  • 提交 mutation:this.$store.commit('moduleName/xxx');
  • 分發 action:this.$store.dispatch('moduleName/xxx');
  • 可以通過mapXXX的方式獲取到state、getters、mutations、actions。

模組的區域性狀態

對於模組內部的 mutation 和 getter,接收的第一個引數是模組的區域性狀態物件。

同樣,對於模組內部的 action,區域性狀態通過 context.state 暴露出來,根節點狀態則為 context.rootState。

對於模組內部的 getter,根節點狀態會作為第三個引數暴露出來。

最後給堅持下來小夥伴的獎勵

如果對您有幫助,希望能給個👍評論收藏三連!

前端老實人不止會前端哦,聽說小夥伴都喜歡這些東西?

image.png

想跟博主交朋友的可以通過檢視主頁:前端老實人,獲取資料哦

「其他文章」