How to invoke component method from store.js

Question

I have Login.vue component which has method postData()

postData() {

  this.$store.dispatch('doLogin', fdata)

},

doLogin is in store.js

  actions: {

    doLogin({ commit }, loginData) {

      commit('loginStart');

      axios.post(this.state.apiURL+'/login', {
        ...loginData
      })
      .then(response => {

        commit('loginStop', null);
        commit('updateAccessToken', response.data.access_token);

      })
      .catch(error => {

        commit('loginStop', error);

      })
    },

how to invoke back from router.js a method in other component, let say again from Login.vue?

I want in general invoke Toast which is bootstrap thing in Login.vue methods.

Any idea?

shouldn't you just `return` your Promise chain that starts off with the `axios.post(...).then(...)...` chain so that you can continue the chain outside the `doLogin(...)` action where you're calling it? Not sure if it'll actually expose it there, but I assume you could then do `this.$store.dispatch('doLogin', fdata).then(() => /* do whatever else here */);` — chamberlainpi, Nov 02 '19 at 02:10
Thanks it works (ie returning Promise in Actions). I have found a little bit more information here: https://stackoverflow.com/questions/40165766/returning-promises-from-vuex-actions — user2401543, Nov 02 '19 at 09:33

score 0 · Answer 1 · answered Nov 02 '19 at 09:39

Login.vue component method

      this.$store.dispatch('doLogin', fdata).then(response => {
          console.log("response from promise:",response)
        }, error => {
            this.makeToast(true, error, 'danger', 'b-toaster-top-center')
            console.error("Got error:",error)
        })

store.js Actions

    doLogin({ commit }, loginData) {
      return new Promise((resolve, reject) => {
          console.log("store - doLogin", loginData)
          commit('loginStart');
          axios.post(this.state.apiURL+'/login', {
            ...loginData
          })
          .then(response => {
            localStorage.setItem('accessToken', response.data.access_token);
            commit('loginStop', null);
            commit('updateAccessToken', response.data.access_token);
            router.push('/profile');
            resolve(response);
          })
          .catch(error => {
            console.log('error', error)
            commit('loginStop', error);
            commit('updateAccessToken', null);
            reject(error)
          })
      })
    },

How to invoke component method from store.js

1 Answers1