Maison > interface Web > Voir.js > Parlons de la façon dont vuex modularise le codage + l'espace de noms

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

青灯夜游
Libérer: 2023-02-08 19:47:32
avant
2606 Les gens l'ont consulté

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 !

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

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
Copier après la connexion

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

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

// 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
        }
    }
}
Copier après la connexion

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"]) 
  },
Copier après la connexion

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

  },
Copier après la connexion

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'])
  },
Copier après la connexion

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" }), // 对象式
      },
  }
Copier après la connexion
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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal