Gestion de formulaire avec Vuex : Mise en place des mutation

Gérer les Formulaires avec Vuex : Une Approche Structurée

===========================================================

Introduction

Gérer les formulaires dans une application Web peut être un défi, surtout lorsqu’il s’agit de maintenir la cohérence entre l’état client et le serveur. Dans ce chapitre, nous allons explorer comment utiliser Vuex pour gérer des formulaires complexes en suivant une approche structurée.

Comprendre les Mutations

Les mutations dans Vuex sont les fonctionnalités responsables de modifier l’état d’une application. Pour notre exemple de formulaire, nous allons créer plusieurs mutations pour gérer chaque champ du formulaire :

// form_handling/10-vuex-app/store.js
const mutations = {
  UPDATE_NEW_ITEM (state, payload) {
    state.fields.newItem = payload;
  },
  UPDATE_EMAIL (state, payload) {
    state.fields.email = payload;
  },
  UPDATE_URGENCY (state, payload) {
    state.fields.urgency = payload;
  },
  UPDATE_TERMS_AND_CONDITIONS (state, payload) {
    state.fields.termsAndConditions = payload;
  },
  UPDATE_ITEMS (state, payload) {
    state.items = payload
  },
  CLEAR_FIELDS () {
    state.fields.newItem = '';
    state.fields.email = '';
    state.fields.urgency = '';
    state.fields.termsAndConditions = false
  }
}

Créer les Getters

Les getters sont des fonctionnalités qui permettent de récupérer des données de l’état d’une application sans affecter directement cet état. Nous allons utiliser les getters pour mapper toutes les informations pertinentes relatives au formulaire :

// form_handling/10-vuex-app/store.js
const getters = {
  newItem: state => state.fields.newItem,
  newItemLength: state => state.fields.newItem.length,
  isNewItemInputLimitExceeded: state => state.fields.newItem.length >= 20,
  email: state => state.fields.email,
  urgency: state => state.fields.urgency,
  isNotUrgent: state => state.fields.urgency === 'Nonessential',
  termsAndConditions: state => state.fields.termsAndConditions,
  items: state => state.items
}

Mettre à Jour le Formulaire

Maintenant que nous avons créé les mutations et les getters, nous pouvons mettre à jour notre formulaire pour utiliser ces nouvelles fonctionnalités. Tout d’abord, mettons à jour la propriété calculée de notre composant pour mapper directement aux getters en utilisant l’aideur mapGetters :

// form_handling/10-vuex-app/main.js
computed: Vuex.mapGetters({
  newItem: 'newItem',
  newItemLength: 'newItemLength',
  isNewItemInputLimitExceeded: 'isNewItemInputLimitExceeded',
  email: 'email',
  urgency: 'urgency',
  isNotUrgent: 'isNotUrgent',
  termsAndConditions: 'termsAndConditions',
  items: 'items'
}),

Créer les Événementiers

Nous allons maintenant créer un événementier pour chaque champ du formulaire afin de mettre à jour l’état lorsque l’utilisateur effectue une modification :

// form_handling/10-vuex-app/main.js
onInputChange(evt) {
  const element = evt.target;
  const value = element.name === "TERMS_AND_CONDITIONS" ? element.checked : element.value;
  this.$store.commit(`UPDATE_${element.name}`, value);
},

Créer les Actions

Pour gérer les interactions avec le serveur, nous allons créer deux actions : loadItems pour récupérer la liste des items persistés et saveItems pour enregistrer les modifications apportées au formulaire :

// form_handling/10-vuex-app/store.js
const actions = {
  loadItems(context, payload) {
    apiClient.loadItems().then((items) => {
      context.commit("UPDATE_ITEMS", items);
    });
  },
  saveItems(context, payload) {
    const items = payload;
    apiClient.saveItems(payload).then(() => {
      context.commit("UPDATE_ITEMS", items);
      context.commit("CLEAR_FIELDS");
    });
  }
}

Conclusion

Dans ce chapitre, nous avons vu comment utiliser Vuex pour gérer des formulaires complexes en suivant une approche structurée. Les mutations et les getters sont les briques essentielles d’une application Vuex, permettant de maintenir la cohérence entre l’état client et le serveur.

Prochaines Étapes

• Explorez davantage les fonctionnalités de Vuex pour améliorer votre compréhension.
• Appliquez cette approche à vos projets pour une gestion des formulaires efficace.

Nous espérons que vous avez trouvé ce chapitre utile. N’hésitez pas à nous faire part de vos commentaires ou questions !