28_Vue3狀态管理-Vuex之mutations_modules_actions的使用

Vue3狀态管理-Vuex之mutations、actions、modules的使用

Mutation的使用

更改 Vuex 的 store 中的狀态的唯一方法是送出 mutation：

Mutation攜帶資料

很多時候我們在送出mutation的時候，會攜帶一些資料，這個時候我們可以使用參數：

payload為對象類型

對象風格的送出方式

Mutation常量類型

定義常量：mutation-type.js

定義mutation

送出mutation

mapMutations輔助函數

我們也可以借助于輔助函數，幫助我們快速映射到對應的方法中：

在setup中使用也是一樣的：

mutation重要原則

一條重要的原則就是要記住 mutation 必須是同步函數

• 這是因為devtool工具會記錄mutation的日記；
• 每一條mutation被記錄，devtools都需要捕捉到前一狀态和後一狀态的快照；
• 但是在mutation中執行異步操作，就無法追蹤到資料的變化；
• 是以Vuex的重要原則中要求 mutation必須是同步函數；

actions的使用

Action類似于mutation，不同在于：

• Action送出的是mutation，而不是直接變更狀态；
• Action可以包含任意異步操作；

這裡有一個非常重要的參數context：

• context是一個和store執行個體均有相同方法和屬性的context對象；
• 是以我們可以從其中擷取到commit方法來送出一個mutation，或者通過 context.state 和 context.getters 來擷取 state 和 getters；
• 但是為什麼它不是store對象呢？這個等到我們講Modules時再具體來說；

actions的分發操作

如何使用action呢？進行action的分發：分發使用的是 store 上的dispatch函數；

同樣的，它也可以攜帶我們的參數：

也可以以對象的形式進行分發：

actions的輔助函數

action也有對應的輔助函數：

• 對象類型的寫法；
• 數組類型的寫法；

actions的異步操作

Action 通常是異步的，那麼如何知道 action 什麼時候結束呢？

我們可以通過讓action傳回Promise，在Promise的then中來處理完成後的操作；

module的使用

什麼是Module？

• 由于使用單一狀态樹，應用的所有狀态會集中到一個比較大的對象，當應用變得非常複雜時，store 對象就有可能變得相當臃腫；
• 為了解決以上問題，Vuex 允許我們将 store 分割成子產品（module）；
• 每個子產品擁有自己的 state、mutation、action、getter、甚至是嵌套子子產品；

module的局部狀态

對于子產品内部的 mutation 和 getter，接收的第一個參數是子產品的局部狀态對象：

module的命名空間

預設情況下，子產品内部的action和mutation仍然是注冊在全局的命名空間中的：

• 這樣使得多個子產品能夠對同一個 action 或 mutation 作出響應；
• Getter 同樣也預設注冊在全局命名空間；

如果我們希望子產品具有更高的封裝度和複用性，可以添加 namespaced: true 的方式使其成為帶命名空間的子產品：

• 當子產品被注冊後，它的所有 getter、action 及 mutation 都會自動根據子產品注冊的路徑調整命名；

module修改或派發根元件

如果我們希望在module的actions中修改root中的state，那麼有如下的方式：

module的輔助函數

module輔助函數有三種使用方法：

方式一：通過完整的子產品空間名稱來查找；

方式二：第一個參數傳入子產品空間名稱，後面寫上要使用的屬性；

方式三：通過 createNamespacedHelpers 生成一個子產品的輔助函數；

第三種方式： createNamespacedHelpers