vuex中module的命名空間概念

vuex中module的命名空間概念

• 默認情況下，模塊內部的 action、mutation 和 getter 是注冊在全局命名空間的。

  • 弊端1：不同模塊中有相同命名的mutations、actions時，不同模塊對同一 mutation 或 action 作出響應。
  • 弊端2：當一個項目中store分了很多模塊的時候，在使用輔助函數mapState、mapGetters、mapMutations、mapActions時，很難查詢，引用的state、getters、mutations、actions來自於哪個模塊，不便於后期維護。
  • 

• 可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當模塊被注冊后，它的所有 getter、action 及 mutation 都會自動根據模塊注冊的路徑調整命名。

  1. 在模塊中添加 namespaced: true， 開始命名空間

     

  2. 在根store中引入模塊並掛載

     

  3. 組件中使用模塊中定義的“permissionList” state

     • 第一種方式

       // 1. 導入輔助函數mapState
       import { mapState } from "vuex";
       export default {
         props: {
           data: {
             type: Object,
             default: "chart"
           }
         },
         data() {
           return {
             list: {}
           };
         },
         computed: {
             //2. 在輔助函數mapState的第一參數上，填寫上模塊的命名空間名。根據掛載方式不同，此處的命名空間名就是 wechatType 或 aaa。
           ...mapState('命名空間名', ["permissionList"])
         },
       

     • 第二種方式

       //通過使用 createNamespacedHelpers 創建基於某個命名空間輔助函數。
       //它返回一個對象，對象里有新的綁定在給定命名空間值上的組件綁定輔助函數
       import { createNamespacedHelpers } from "vuex";
       const { mapState } = createNamespacedHelpers('命名空間名')
       export default {
         computed: {
           ...mapState(["permissionList"])
         }
       ｝