Vuex是專門為Vue.js開發的狀態管理模式，它采用集中式存儲，管理所有組件的狀態，並以相應的規則確保狀態以可預測的方式變化（我的理解是全局變量）。
狀態
類似於實例的數據屬性，對象類型保存數據。
吸氣劑
對象類型，類似於實例的計算屬性。
突變
對象類型，類似於實例的方法，但無法處理異步方法。
行動
類似於實例的方法，對象類型可以處理異步方法。
模塊
對象類型，當有很多狀態內容時，可以通過該屬性劃分成小模塊，每個模塊都有自己的狀態、突變、動作和getter。
存儲在狀態中的數據遵循與Vue實例中的數據相同的規則，並且必須是純對象。
getter的返回值將根據其依賴性進行緩存，只有當其依賴性值發生變化時才會重新計算。默認情況下，它接受state作為第壹個參數，也可以接受其他getters作為第二個參數（如下例所示）。
稱之為。$ store . commit（‘XXX‘），調用mutation中的方法來更改存儲中的值。
創建壹個新文件mutation-types.js，定義方法名的常數，並導出它們。
在商店裏
在大會上
請註意，Action提交突變而不是直接更改狀態，並且可以包含任何異步操作。
或者
Action接受與store實例具有相同方法和屬性的context parameter對象，因此您可以調用context.commit提交突變，或者通過context.state和context.getters獲取狀態和getters .使用ES6的解構，可以簡化編寫。
在vuex中
使用async/await或then/catch來處理組件中的異步。
當應用程序變得非常復雜時，store對象可能會變得非常臃腫。此時，可以將存儲劃分為模塊，每個模塊都有自己的狀態、突變、動作、getter甚至嵌套的子模塊，從上到下的劃分方式相同。
在存儲目錄中創建壹個新的modules文件夾，並在Modules文件夾中創建壹個新的Modulesa.js和modulesB.js，如下所示。
在modulesA.js中寫入本地模塊的狀態、突變、動作和getter，並將其導出。
然後將其引入商店的index.js並將其扔進modules對象。
直接在組件中使用。
在組件中使用mapState映射
直接在組件中使用。
在組件中使用mapState映射
模塊內部的getter、參數state和接受的getter是模塊的本地狀態對象，根節點的狀態將作為第三個參數rootState公開。
如果需要參數。
直接在組件中使用。
在組件中使用mapMutations映射。
模塊內部的突變，默認情況下接受的第壹個參數狀態是模塊的局部狀態對象。
如果需要參數。
直接在組件中使用。
在組件中使用mapActions映射。
或者重命名。
對於模塊內部的操作，本地狀態通過context.state公開，根節點狀態為context.rootState
默認情況下，模塊內的動作、突變和getter在全局名稱空間中註冊，這使得多個模塊能夠響應同壹突變或動作。如果您想要壹個具有更高封裝性和可重用性的模塊，可以通過添加namespaced: true使其成為具有名稱空間的模塊。當壹個模塊被註冊時，它的所有getter、action和mutation都將根據模塊註冊的路徑自動命名。
首先在moduleB.js模塊中添加named: true。
在商店的index.js中。
如果在組件中使用名稱空間，則需要引入空間名稱。MapState、MapGetters、MapMutations和mapActions的用法相同。
如果您想使用全局狀態和getter，根狀態和根getter將作為第三和第四個參數傳遞給getter，並且該操作也將通過上下文對象的屬性傳遞。如果您需要在全局名稱空間中分發操作或提交變化，只需將{root: true}作為第三個參數傳遞給dispatch或commit。
要在具有名稱空間的模塊中註冊全局操作，需要添加root: true並將此操作的定義放入函數處理程序中，其中處理程序的第壹個參數是操作中的上下文參數。
如果妳覺得有幫助的話，我是@彭多多11997110103。歡迎關註評論。
結束
以前的文章
個人主頁