Question

所以我有一个具有此方法的组件：

const message = {
  title: this.title,
  message: this.message,
  receiver: this.username
}
this.$store.dispatch('contactAuthor', message);

然后这会在actions.js中发生：

const contactAuthor = ({commit}, payload) => {
    API.post('send-message', payload).then((response) => {
        if(response.status === 200 && response.data.success) {
          // WHAT TO RETURN HERE TO SET SUCCESS TO TRUE IN COMPONENT?
        } else {
          console.log('Something went wrong');
        }
      }).catch((error) => {
        console.log('Something went wrong');
      });     
}

现在，我的组件中有名为success: false的数据，当我从true actions.js调用函数时，我想将其设置为contactAuthor。如何返回true并将其设置为组件中的数据success？

Answer 1

我个人觉得将数据发送回组件不是理想的方法。相反，您可以在actions.js中具有另一个常量（如下所示），并具有相同的getter。作为计算属性访问组件中的吸气剂。

// actions.js
const state = {
    api: {
        fetch: {
            inProgress: false,
            completed: false,
            success: false,
            error: false,
        },
        data: {}
    }
}

const getter = {
    'API_DATA': state => {
        return state.api
    }    
}

const mutations = {
    'SET_API_DATA_FETCH_IN_PROGRESS': state => {
        state.api.fetch.inProgress = true
        state.api.fetch.completed = false
        state.api.fetch.success = false
        state.api.fetch.error = false
        state.api.data = {}
    },
    'SET_API_DATA_FETCH_SUCCESS': (state, payload) => {
        state.api.fetch.inProgress = false
        state.api.fetch.completed = true
        state.api.fetch.success = true
        state.api.fetch.error = false
        state.api.data = payload
    },
    'SET_API_DATA_FETCH_ERROR': (state, payload) => {
        state.api.fetch.inProgress = false
        state.api.fetch.completed = true
        state.api.fetch.success = false
        state.api.fetch.error = true
        state.api.data = payload
    }
}

const contactAuthor = ({ commit }, payload) => {
    commit('SET_API_DATA_FETCH_IN_PROGRESS')
    API.post('send-message', payload).then((response) => {
        if (response.status === 200 && response.data.success) {
            // WHAT TO RETURN HERE TO SET SUCCESS TO TRUE IN COMPONENT?
            commit('SET_API_DATA_FETCH_SUCCESS', response)
        } else {
            commit('SET_API_DATA_FETCH_ERROR', response)
            console.log('Something went wrong');
        }
    }).catch((error) => {
        commit('SET_API_DATA_FETCH_ERROR', response)
        console.log('Something went wrong');
    });
}

// component.vue
computed: {
    apiDataFetchSuccess() {
      return this.$store.getters.API_DATA.fetch.success
    },
    apiData() {
      return this.$store.getters.API_DATA.data
    }
}

Answer 2

好的，这行得通。

const contactAuthor = (payload) => {
   return API.post('send-message', payload).then((response) => {
        if(response.status === 200 && response.data.success) {
          const trueMessage = true;
          return trueMessage;
        } else {
          console.log('Something went wrong');
        }
      }).catch((error) => {
        console.log('Something went wrong');
      });     
}

从axios返回承诺，然后从trueMessage返回contactAuthor，然后在组件中进行如下设置：

this.$store.dispatch('contactAuthor', message).then(data => {
  this.success = data;
});

Answer 3

在商店突变中，您必须执行以下操作：

return new Promise((resolve, reject) => {
      API.post('send-message', payload).then((response) => {
        if(response.status === 200 && response.data.success) {
          const trueMessage = true;
          resolve(trueMessage)
        } else {
          reject('Something went wrong')
          console.log('Something went wrong');
        }
      }).catch((error) => {
        reject(error)
        console.log('Something went wrong');
      });
})

在您的组件中执行以下操作：

this.$store.dispatch('contactAuthor', message)
.then( (success)  => {
   //OK, do something
})
.catch( (error) => {
   // ERROR, do something
});

将VUEX操作的响应返回给组件

3 个答案: