Cacher is the code snippet organizer for pro developers

分割

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

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 作用域物件

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 作用域物件

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 都會自動根據模塊註冊的路徑調整命名

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

// 注意這一段
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'])
  }
}