Parlons de la façon dont vuex modularise le codage + l'espace de noms

Comment vuex modularise-t-il le codage + l'espace de noms ? Jetons un bref coup d'œil à cet article, j'espère qu'il sera utile à tout le monde !

Codage modulaire + espace de noms

Petit a : "Pourquoi voulez-vous activer cela ?" Shanyu : "Bien sûr, cela rend le code plus facile à maintenir et rend la classification des diverses données plus claire. "

Petit a : "Alors comment pouvons-nous réaliser codage modulaire + espace de noms "

Shanyu : "C'est tout ce qu'il faut"

namespaced: true

Mettez toutes les choses dans le composant Count et le composant Person À l'intérieur du magasin

// 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. Après avoir ouvert l'espace de noms, lisez les données d'état

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

3 Après avoir ouvert l'espace de noms, lisez les données des getters dans le composant

  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. le composant

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

5. Après avoir ouvert l'espace de noms, appelez commit dans le composant

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" }), // 对象式
      },
  }

Je peux seulement dire que la modularisation est très parfumée, le code est plus clair et les données sont plus claires, et la maintenance ultérieure est également very niue

(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!