Возврат ответа от действий VUEX компоненту

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

Хорошо, это сработало.

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 2

Лично я чувствую, что отправка данных обратно компоненту не идеальный способ.Вместо этого вы можете иметь другую константу (как показано ниже) в файле actions.js и получить ее для получения.Получите доступ к получателю в вашем компоненте как к вычисляемому свойству.

// 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
    }
}