Grundsätzlich verwende ich Vue 3 und versuche, einen vom Server zurückgegebenen Fehler zuzuordnen, beispielsweise wenn die E-Mail von einem anderen Benutzer übernommen wurde. Beim ersten Mal hat es gut funktioniert, ich konnte die vom Server zurückgegebene Nachricht meinem state.responseErrorMessage-Attribut zuordnen, aber wenn ich versuche, eine neue E-Mail erneut zu senden, ohne die Seite zu aktualisieren, wird die Mutation ERROR_MESSAGE nicht aktualisiert!
<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: {}
})
请不要在你的mutation函数中使用异步方法(setInterval、setTimeout、promise、ajax...)，你可以改变你的代码，代码
ERROR_MESSAGE(state, message) { state.responseErrorMessage = message setInterval(() => { state.responseErrorMessage = null }, 3000) }你可能想将responeErrorMessage重置为null，但是方式不对，你可以这样写：
突变：
ERROR_MESSAGE(state, message) { state.responseErrorMessage = message }全球观察：
responseErrorMessage (New,Old){ if(New){ setTimeout(()=>{ this.$store.commit('ERROR_MESSAGE',null) },3000) } }你可以试试