Вызвать действие Vuex из компонента после завершения мутации - PullRequest
Новая
       47

Вызвать действие Vuex из компонента после завершения мутации

1 голос
/ 20 марта 2020

У меня есть компонент Vue, который вызывает действие Vuex в своем хуке create (api.get, который выбирает некоторые данные, а затем отправляет мутацию). После того, как эта мутация завершена, мне нужно вызвать действие в другом магазине, в зависимости от того, что было установлено в состоянии моего магазина ... в этом случае getUserSpecials.

Я пытался использовать .then() в моем действии, но эта мутация еще не завершена, хотя Обещание api.get разрешено, поэтому состояние хранилища, которое мне нужно было проверить, еще не было доступно.

Кто-нибудь знает, существует ли ' лучшая практика »для этого? Я также подумал об использовании наблюдателя в состоянии магазина.

В моем компоненте у меня есть: 

  created () {
   this.getUserModules();
    if (this.userModules.promos.find((p) => p.type === 'specials')) {
     this.getUserSpecials();
    }
  },

methods: {
   ...mapActions('userProfile', ['getUserModules',],),
   ...mapActions('userPromos', ['getUserSpecials',],),
},

В моем магазине у меня есть: 

const actions = {
  getUserModules ({ commit, dispatch, }) {
  api.get(/user/modules).then((response) => {
   commit('setUserModules', response);
  });
 },
};

export const mutations = {
 setUserModules (state, response) {
  Object.assign(state, response);
 },

};

Прямо сейчас простая проверка if в моем create хуке работает нормально, но мне интересно, есть ли более элегантный способ сделать это.

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Сделайте свое действие, верните обещание:

Изменение: 

      getUserModules ({ commit, dispatch, }) {
      api.get(/user/modules).then((response) => {
       commit('setUserModules', response);
      });
     },

Кому: 

    getUserModules({commit, dispatch}) {
       return new Promise((resolve, reject) => {
            api.get(/user/modules).then((response) => {
                commit('setUserModules', response);
                resolve(response)
            }).catch((error) {
                reject(error)
            });
        });
    },

И тогда ваш created() крючок может быть: 

      created () {
       this.getUserModules().then((response) => {
            if(response.data.promos.find((p) => p.type === 'specials'))
                this.getUserSpecials();
       }).catch((error){
        //error
       });
      },
0 голосов
/ 20 марта 2020

[1] Ваше действие должно return a promise

getUserModules ({ commit, dispatch, }) {
  return api.get(/user/modules).then((response) => {
   commit('setUserModules', response);
  })
}

[2] Позвонить другому dispatch, если первое было resolved

created () {
  this.getUserModules().then(response => {
    this.getUserSpecials()
  })
}
...