Как выполнить код после завершения действия в vue js? - PullRequest
Новая
       80

Как выполнить код после завершения действия в vue js?

0 голосов
/ 04 мая 2020

Как выполнить код после завершения действия в vue js? это мое действие при входе в систему 

  login: async ({commit},loginDTO)=>{
         return  commit('login',loginDTO);
  }

Мои мутации при входе в систему таковы: 

login:(state, loginDTO)=>{

 axios.post(loginEndpoint.login, loginDTO)
  .then(resp => {
    if(resp.data.statusCode == 1) {
      state.user.userId = resp.data.userId;
      state.user.response = resp.data.responseText;
      localStorage.setItem("token", "token")
      state.isLogin = true;
      router.push({name: 'Systems'});

    }
    else{
      alert(66);
      state.user.response = resp.data.responseText;
      }
  })
  .catch(err => {

  })
}

И я вызываю его из компонента следующим образом: 

    methods:{
      ...mapActions(['login']),
      async login1(){

        const loginDTO = {
          Username : this.user.Username,
          Password: this.user.Password
        };
        await this.$store.dispatch('login',loginDTO);

        this.$toastr.s("Message", "");

      }
    }

Теперь мне нужно тост сообщение, но после того, как действие завершено. Обновленный.

Ответы [ 2 ]

0 голосов
/ 04 мая 2020

Используйте asyn c -wait и ожидайте завершения асин c действия и синхронизируйте мутацию c перед тем, как показывать тост: 

// action
login: async ({commit},loginDTO)=>{
  try {
    const { data } = await axios.post(loginEndpoint.login, loginDTO)
    commit('login', data.userId, data.responseText, true);
  } catch(error) {
    commit('login', null, error.message, false);
  }
}

// mutation
login: (state, userId, response, isLogin) {
  state.user.userId = userId;
  state.user.response = response;
  state.isLogin = isLogin
}

methods:{
...mapActions(['login']),
    async login1(){
    const loginDTO = {
      Username : this.user.Username,
      Password: this.user.Password
    };
    await this.$store.dispatch('login',loginDTO);
    this.$toastr.s("Message", "");
  }
}
0 голосов
/ 04 мая 2020

Я думаю, что все, что вам нужно сделать, это вызвать функцию toast после завершения действия, как обычно, функцию обратного вызова после того, как ajax вернет 200, например, я использовал

https://github.com/ankurk91/vue-toast-notification

затем запустите его как обратный вызов

this.$toast.open('You did it!');

(убедитесь, что тост был зарегистрирован в вашем экземпляре vue)

...