Maison > Questions et réponses > le corps du texte
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 !
<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>
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粉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