时间戳

首页 > 解决方案 > 如何从 store.js 调用组件方法

vue.js - 如何从 store.js 调用组件方法

问题描述

我有 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 方法中的引导程序。

任何想法？

标签： vue.jsauthenticationstoretoastbootstrap-vue

解决方案

Login.vue 组件方法

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

推荐阅读