每次提交表单后如何更新vuex状态？

Question

基本上我正在使用 Vue 3 并且我正在尝试分配服务器返回的错误，例如，如果电子邮件已被其他用户接收。第一次正常工作时，我可以将服务器返回的消息分配给我的 state.responseErrorMessage 属性，但是当我尝试使用新电子邮件重新发送来自而不刷新页面时，ERROR_MESSAGE 突变不会更新！

我的组件：

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

Answer 1

请不要在你的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)
  }
}

你可以试试