Bagaimana untuk mengemas kini status vuex selepas setiap penyerahan borang?

Question

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

Answer 1

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