recherche

Maison  >  Questions et réponses  >  le corps du texte

Comment mettre à jour le statut vuex après chaque soumission de formulaire ?

En gros j'utilise Vue 3 et j'essaye d'attribuer une erreur renvoyée par le serveur, par exemple si l'email a été pris par un autre utilisateur. Cela a bien fonctionné la première fois, j'ai pu attribuer le message renvoyé par le serveur à mon attribut state.responseErrorMessage, mais lorsque j'essaye de renvoyer avec un nouvel email sans rafraîchir la page, la mutation ERROR_MESSAGE ne se met pas à jour !

Mes composants :

    <script>
        computed: {
        ...mapState(['responseSuccessMessage','responseErrorMessage']),
        },
        methods: {
          ...
          if( this.errors.firstname.errMsg === null && 
                  this.errors.lastname.errMsg === null && 
                  this.errors.email.errMsg === null && 
                  this.errors.password.errMsg === null && 
                  this.errors.passwordConfirm.errMsg === null &&
                  this.errors.terms.errMsg === null) {
                    this.$store.dispatch('creatAccount', {
                      firstName: this.firstname, 
                      lastName: this.lastname,
                      email: this.email,
                      password: this.password
                    })
                    setTimeout(() => { 
                      // first time submitting the form it display the error message but the second time it doesn't !   
                      console.log(this.responseErrorMessage)  
                    }, 2000)
                }
        }
     </script>

Je veux :

        export default createStore({
          state: {
            responseSuccessMessage: null,
            responseErrorMessage: null
          },
          mutations: {
              SUCCESS_MESSAGE(state, message) {
              state.responseSuccessMessage = message
            },
            ERROR_MESSAGE(state, message) {
              state.responseErrorMessage = message
              setInterval(() => {
                state.responseErrorMessage = null
              }, 3000)
            }
          },
          actions: { 
            async creatAccount({ context, commit, }, user) {
              try {
                let result = await axios.post('http://localhost:3001/api/auth/signup', {
                  firstName: user.firstName,
                  lastName: user.lastName,
                  email: user.email,
                  password: user.password
                })
                if (result.status === 201) {
                  commit('SUCCESS_MESSAGE', result.data.message)
                  // state.responseSuccessMessage = result.data.message
                }
              } catch (err) {
                if (err.response.status === 409) {
                  context, commit, // Put this line to avoid eslint errors!
                    commit('ERROR_MESSAGE', err.response.data.message)
                } else {
                  console.log(err)
                }
              }
            }
          },
          modules: {}
        })

P粉592085423P粉592085423234 Il y a quelques jours393

répondre à tous(1)je répondrai

  • P粉092778585

    P粉0927785852024-03-31 11:12:33

    Veuillez ne pas utiliser de méthodes asynchrones (setInterval, setTimeout, promise, ajax...) dans votre fonction de mutation, vous pouvez modifier votre code, code

    ERROR_MESSAGE(state, message) {
          state.responseErrorMessage = message
          setInterval(() => {
            state.responseErrorMessage = null
          }, 3000)
        }
    

    Vous souhaiterez peut-être réinitialiser ResponseErrorMessage sur null, mais dans le mauvais sens, vous pouvez écrire comme ceci :

    Mutation :

    ERROR_MESSAGE(state, message) {
          state.responseErrorMessage = message
        }
    

    Veille mondiale :

    responseErrorMessage (New,Old){
      if(New){
        setTimeout(()=>{
         this.$store.commit('ERROR_MESSAGE',null)
        },3000)
      }
    }
    

    Vous pouvez l'essayer

    répondre
    0
  • Annulerrépondre