markdown Vuex模块概念

Posted 2021-05-05

## 分割

將`store`分割成`module`，每個`module`擁有自己的`state`、`mutation`、`action`、`getter`

```javascript
const moduleA = {
  namespaced: true,
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    moduleA,
    moduleB
  }
})

store.state.moduleA // -> moduleA 的state狀態
store.state.moduleB // -> moduleB 的state狀態
```

## Module local status

module 內部的`mutation`和`getter`，接收的第一個參數為**Module 作用域物件**

```javascript
const moduleA = {
  namespaced: true,
  // count會寫到全域
  // 取用方法: $store.state.moduleA.count
  state: { count: 0 },
  mutations: {
    increment(state) {
      // state: Module 作用域物件
      state.count++
    }
  },

  getters: {
    // 取用方法: $store.getters.moduleA.doubleCount
    // 或: $store.rootGetters.doubleCount
    doubleCount(state) {
      return state.count * 2
    }
  }
}
```

`action`同樣也是使用**Module 作用域物件**

```javascript
const moduleA = {
  // ...
  actions: {
    // state: 作用域狀態
    // rootState: 根節點狀態
    actionIncrement({ state, commit, rootState }) {
      if ((state.count + rootState.count) % 2 === 1) {
        commit('increment')
      }
    }
  }
}
```

## 命名空間

默認情況下，模塊內部的 `action`、`mutation` 和 `getter` 是註冊在**全域命名空間**的

這樣使得多個模塊能夠對同一 `mutation` 或 `action` 作出響應

通過添加 `namespaced: true` 的方式使其成為帶命名空間的模塊

當模塊被註冊後，它的所有 `getter`、`action` 及 `mutation` 都會自動根據**模塊註冊的路徑**調整命名

```javascript
const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模塊內容（module assets）
      // 模塊內的狀態已經是嵌套的了，使用 `namespaced` 屬性不會對其產生影響
      state: { ... },
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      },

      // 嵌套模塊
      modules: {
        // 繼承父模塊的命名空間
        myPage: {
          state: { ... },
          getters: {
            profile () { ... } // -> getters['account/profile']
          }
        },

        // 進一步嵌套命名空間
        posts: {
          namespaced: true,

          state: { ... },
          getters: {
            popular () { ... } // -> getters['account/posts/popular']
          }
        }
      }
    }
  }
})
```

#### 帶命名空間的綁定函數

使用`mapState`、`mapGetters`、`mapActions` 和 `mapMutations`

通過使用 `createNamespacedHelpers` 創建基於某個命名空間輔助函數

可用於找**本身和別人**的`state`

```javascript
// 注意這一段
import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions(['foo', 'bar'])
  }
}
```