cari

Rumah  >  Soal Jawab  >  teks badan

Bagaimana untuk mengemas kini status vuex selepas setiap penyerahan borang?

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

P粉592085423P粉592085423234 hari yang lalu392

membalas semua(1)saya akan balas

  • P粉092778585

    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

    balas
    0
  • Batalbalas