vuex中modules的使用場景和注意事項

之前的專案一直是store下面放各種js檔案（index.js、state.js、getter.js、mutation-types.js、mutations.js、action.js）; 如下圖

└── store ├── index.js # 我們組裝模組並匯出 store 的地方 ├── actions.js # 根級別的 action ├── mutations.js # 根級別的 mutation ├── state.js # 根級別的 state └── getter.js

複製**

使用單一的狀態樹，應用的所有狀態都會集中在乙個比較大的物件上面，隨著專案需求的不斷增加，狀態樹也會變得越來越臃腫，增加了狀態樹維護的複雜度,而且**變得沉長；因此我們需要modules來為我們的狀態樹分隔成不同的模組，每個模組擁有自己的state，getters，mutations，actions；而且允許每個module裡面巢狀子module；如下：

└── store ├── index.js # 我們組裝模組並匯出 store 的地方 ├── actions.js # 根級別的 action ├── mutations.js # 根級別的 mutation ├── state.js # 根級別的 state └── modules ├── module1.js # 模組1的state樹 └── module2.js # 模組2的state樹

複製**

模組module1.js內部的**結構如下

import  from
'@/store/mutation-types.js'
// 引入事件型別
export
default ,
getters: ,
modulegetheight(state, getters, rootstate) 
},mutations: ,
addheight(state) 
},actions: 
}複製**

註冊到根state。

index.js如下

import state from
'./state'
import getters from
'./getters'
import mutations from
'./mutations'
import actions from
'./actions'
import module1 from
'./modules/module1.js'
// 引入module1
export
default 
}複製**

在元件內列印state。

console.log(this.$store.state)
複製**

如圖

由上圖，可以看到，module1已經被我們新增到了當前的store.state內;

需要注意的

vuex在元件中computed中使用的時候，計算屬性不能和state的資料項同名（同名了也不會報錯，就是獲取不了資料了）

有一點值得注意的是：當我們在元件的計算屬性中使用module裡面的getters的時候,計算屬性不和state的資料項同名這條規則貌似不生效，具體原因還不知道，如果有知道的大佬幫忙指點一下

預設情況下，沒有設定命名空間的時候，模組內部的 action、mutation 和 getter 是(除了state)註冊在全域性命名空間的（如果有重名就會報錯 [vuex] duplicate getter key: [method]）——這樣使得多個模組能夠對同一 mutation 或 action 作出響應。

解決方法是加命名空間namespaced: true

如何在頁面裡面引用module

在modules內的每個模組加入命名空間

namespaced: true

複製**

在vue檔案內也可以這樣

import  from
'vuex'
const = createnamespacedhelpers('mudole1')
複製**

註冊到元件中

import  from
"vuex"
computed: )
},methods: ),
}複製**

註冊完成，使用

created() 
複製**

如何在模組中訪問全域性內容？

如果你希望使用全域性 state 和 getter，rootstate 和 rootgetter 會作為第三和第四引數傳入 getter，也會通過 context 物件的屬性傳入 action。

劃分模組的好處

vuex中modules的使用場景和注意事項

vuex中modules的基礎用法

nuxt中vuex的使用

vue中的vuex的使用

vuex中modules的使用場景和注意事項

vuex中modules的基礎用法

nuxt中vuex的使用

vue中的vuex的使用

相關推薦