vuex怎么模塊化編碼和命名空間

本文小編為大家詳細(xì)介紹“vuex怎么模塊化編碼和命名空間”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vuex怎么模塊化編碼和命名空間”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

模塊化編碼＋命名空間

小a：“為啥要開啟這個(gè)捏？”山魚：“當(dāng)然是讓代碼更好維護(hù)，讓多種數(shù)據(jù)分類更加明確。”

小a：“那如何才能做到模塊化編碼＋命名空間呢”

山魚：“只需要這樣即可”

namespaced: true

將Count組件和Person組件里面的東西全部放到store里面

// Count的相關(guān)配置
export default {
    namespaced: true,
    actions: {
        // 奇數(shù)加法
        jiaodd(context, value) {
            if (context.state.sum % 2) {
                context.commit('JIA', value)
            }
        },
        // 延遲加
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit("JIA", value)
            }, 500);
        },
    },
    mutations: {
        JIA(state, value) {
            state.sum += value
        },
        JIAN(state, value) {
            state.sum -= value
        },
    },
    state: {
        sum: 0, // 當(dāng)前和
        school: '山魚小學(xué)',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

2.開啟命名空間后讀取state的數(shù)據(jù)

  computed: {
     // 自己讀取
    personList() {
      returnthis.$store.state.personAbout.personList;
    },
    sum() {
      returnthis.$store.state.countAbout.sum;
    },
  },
  // 借助mapState讀取
computed: {
    ...mapState("countAbout", ["sum", "subject", "school"]), 
    ...mapState("personAbout", ["personList"]) 
  },

3.開啟命名空間后，組件中讀取getters數(shù)據(jù)

  computed: {
      // 自己讀取
    firstName() {
      returnthis.$store.getters["personAbout/firstPersonName"];
    }
  },
  methods: {
    // 借助mapGetters讀取
    // 借助mapMutations生成對(duì)應(yīng)的方法，方法種會(huì)調(diào)用相應(yīng)的commit去聯(lián)系mutations
    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 對(duì)象式

    ...mapActions('countAbout',{ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //對(duì)象式

  },

4.開啟命名空間后，組件中調(diào)用dispatch

methods: {
     // 直接dispath
    addWang() {
      constpersonObj= { id: nanoid(), name: this.name };
      this.$store.dispatch("personAbout/addNameWang", personObj);
      this.name="";
    },
  },
//借助mapGetters讀取:
  computed: {
    ...mapGetters('countAbout',['bigSum'])
  },

5.開啟命名空間后，組件中調(diào)用commit

methods: {
    // 直接調(diào)用
    add() {
      constpersonObj= { id: nanoid(), name: this.name };
      this.$store.commit("personAbout/ADD_PERSON", personObj);
      this.name="";
    },
 }
  methods: {
    // 借助mapMutations生成對(duì)應(yīng)的方法，方法種會(huì)調(diào)用相應(yīng)的commit去聯(lián)系mutations
    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 對(duì)象式
      },
  }

讀到這里，這篇“vuex怎么模塊化編碼和命名空間”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。