Lassen Sie uns darüber sprechen, wie Vuex Codierung + Namespace modularisiert

Wie modularisiert Vuex Codierung + Namespace? Werfen wir einen kurzen Blick auf diesen Artikel. Ich hoffe, er ist für alle hilfreich!

Modulare Codierung + Namespace

Little a: „Warum möchten Sie das aktivieren?“ Shanyu: „Natürlich erleichtert es die Pflege des Codes und macht die Klassifizierung verschiedener Daten klarer.“ "

Kleines A: „Wie können wir dann modulare Codierung + Namespace erreichen?“

Shanyu: „Das ist alles was es braucht“

namespaced: true

Platzieren Sie alle Dinge in der Count-Komponente und der Person-Komponente im Store

// Count的相关配置
export default {
    namespaced: true,
    actions: {
        // 奇数加法
        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, // 当前和
        school: '山鱼小学',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10
        }
    }
}

2. Lesen Sie nach dem Öffnen des Namespace die Statusdaten

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

3. Lesen Sie nach dem Öffnen des Namespace die Getter-Daten in der Komponente

  computed: {
      // 自己读取
    firstName() {
      returnthis.$store.getters["personAbout/firstPersonName"];
    }
  },
  methods: {
    // 借助mapGetters读取
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式

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

  },

4

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

5 in der Komponente, rufen Sie commit

methods: {
    // 直接调用
    add() {
      constpersonObj= { id: nanoid(), name: this.name };
      this.$store.commit("personAbout/ADD_PERSON", personObj);
      this.name="";
    },
 }
  methods: {
    // 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
    ...mapMutations('countAbout',{ increment: "JIA", decrement: "JIAN" }), // 对象式
      },
  }

in der Komponente auf. Man kann nur sagen, dass die Modularisierung sehr aromatisch ist, der Code klarer ist und die Daten klarer sind und die spätere Wartung ist auch sehr niue

(Teilen von Lernvideos:

vuejs Einführungs-Tutorial, Grundlegendes Programmiervideo)

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Vuex Codierung + Namespace modularisiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!