如何从 store.js 调用组件方法答案

【问题标题】：How to invoke component method from store.js如何从 store.js 调用组件方法
【发布时间】：2020-02-28 03:31:47
【问题描述】：

我有 Login.vue 组件，它有方法 postData()

postData() {

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

},

doLogin 在 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);

      })
    },

如何从 router.js 调用其他组件中的方法，让我们再说一遍 Login.vue？

我通常希望调用 Toast，它是 Login.vue 方法中的引导程序。

有什么想法吗？

【问题讨论】：

您不应该只是return 以axios.post(...).then(...)... 链开头的Promise 链，以便您可以在您调用它的doLogin(...) 操作之外继续该链吗？不确定它是否真的会在那里公开，但我想你可以这样做this.$store.dispatch('doLogin', fdata).then(() => /* do whatever else here */);
感谢它有效（即在行动中返回承诺）。我在这里找到了更多信息：stackoverflow.com/questions/40165766/…

标签： vue.js authentication store toast bootstrap-vue

【解决方案1】：

      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 操作

    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)
          })
      })
    },

【讨论】：