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!

Komponen saya:

    <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>

Nak:

        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: {}
        })