Rumah > Soal Jawab > teks badan
Pada asasnya saya menggunakan Vue 3 dan saya cuba menetapkan ralat yang dikembalikan oleh pelayan, contohnya jika e-mel telah diambil oleh pengguna lain. Ia berfungsi dengan baik pada kali pertama, saya boleh menetapkan mesej yang dikembalikan oleh pelayan kepada atribut state.responseErrorMessage
saya, tetapi apabila saya cuba menghantar semula dengan e-mel baharu tanpa memuat semula halaman, mutasi ERROR_MESSAGE tidak dikemas kini!
<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
Sila jangan gunakan kaedah tak segerak (setInterval, setTimeout, promise, ajax...) dalam fungsi mutasi anda, anda boleh menukar kod, kod anda
ERROR_MESSAGE(state, message) { state.responseErrorMessage = message setInterval(() => { state.responseErrorMessage = null }, 3000) }
Anda mungkin mahu menetapkan semula responseErrorMessage kepada null, tetapi dengan cara yang salah, anda boleh menulis seperti ini:
Mutasi:
ERROR_MESSAGE(state, message) { state.responseErrorMessage = message }
Tonton Global:
responseErrorMessage (New,Old){ if(New){ setTimeout(()=>{ this.$store.commit('ERROR_MESSAGE',null) },3000) } }
Boleh cuba