Vuex之理解Modules

理解Modules

1.什麼是module？

• 背景：在Vue中State使用是單一狀態樹結構，應該的全部的狀態都放在state裏面，若是項目比較複雜，那state是一個很大的對象，store對象也將對變得很是大，難於管理。

• module：能夠讓每個模塊擁有本身的state、mutation、action、getters,使得結構很是清晰，方便管理。

---

2.怎麼用module？

• 通常結構

  const moduleA = {
    state: { ... },
    mutations: { ... },
    actions: { ... },
    getters: { ... }
   }
  const moduleB = {
    state: { ... },
    mutations: { ... },
    actions: { ... }
   }
  
  const store = new Vuex.Store({
    modules: {
      a: moduleA,
      b: moduleB})

• 模塊內部的數據：①內部state，模塊內部的state是局部的，也就是模塊私有的，好比是car.js模塊state中的list數據，咱們要經過this.$store.state.car.list獲取；②內部getter、mutation和action，仍然註冊在全局命名空間內，這是爲了多模塊能夠同時響應同一mutation；this.$store.state.car.carGetter的結結果是undefined，而經過this.$store.state.carGetter則能夠拿到。

• 傳參：getters====({state(局部狀態),getters（全局getters對象）,roosState（根狀態）})；actions====({state(局部狀態),commit,roosState（根狀態）}).