Как получить ответ ajax на vue.js 2?

Question

Мой код выглядит так:

<template> 
    <a href="javascript:" class="btn btn-block btn-success" @click="addFavoriteStore($event)"> 
     <span class="fa fa-heart"></span>&nbsp;Favorite 
    </a> 
</template> 

<script> 
    export default{ 
     props:['idStore'], 
     mounted(){ 
      this.checkFavoriteStore() 
     }, 
     methods:{ 
      addFavoriteStore(event){ 
       alert('tost'); 
       event.target.disabled = true 
       const payload= {id_store: this.idStore} 
       this.$store.dispatch('addFavoriteStore', payload) 
       setTimeout(function() { 
        location.reload(true) 
       }, 1500); 
      }, 
      checkFavoriteStore(){ 
       const payload= {id_store: this.idStore} 
       this.$store.dispatch('checkFavoriteStore', payload) 
       setTimeout(function() { 
        location.reload(true) 
       }, 1500); 
       //get response here 
      } 
     } 
    } 
</script> 

Когда сценарий выполняется, он будет вызывать метод checkFavoriteStore первый

По методу checkFavoriteStore, он будет вызывать действие на vuex магазине

и результаты вернуть ответ

Как получить ответ?

UPDATE

Мои действия на vuex магазине как это:

import { set } from 'vue' 
import favorite from '../../api/favorite' 
import * as types from '../mutation-types' 

// actions 
const actions = { 
    checkFavoriteStore ({ dispatch,commit,state },payload) 
    { 
     favorite.checkFavorite(payload, 
      data => { 
       commit(types.CHECK_FAVORITE_SUCCESS) 
      }, 
      errors => { 
       commit(types.CHECK_FAVORITE_FAILURE) 
       console.log(errors) 
      } 
     ) 
    } 
} 

// mutations 
const mutations = { 
    [types.CHECK_FAVORITE_SUCCESS] (state){ 
     state.addStatus = 'success' 
    }, 
    [types.CHECK_FAVORITE_FAILURE] (state){ 
     state.addStatus = 'failure' 
    } 
} 

export default { 
    actions, 
    mutations 
} 

И АНИ, как это:

import Vue from 'vue' 
import Resource from 'vue-resource' 

Vue.use(Resource) 

export default { 

    // api check favorite exist or not 
    checkFavorite (favorite, cb, ecb = null) { 
     Vue.http.post(window.Laravel.baseUrl+'/member/store/favorite/check-favorite', favorite) 
      .then(
      (resp) => cb(resp.data), 
      (resp) => ecb(resp.data) 
     ); 
    } 
} 

Answer 1

если ваш возвращающая результат затем назначить вызов переменная, поэтому tyr:

var res = this.$store.dispatch('checkFavoriteStore', payload); 

тогда вы можете получить доступ к ответу через var res. Я считаю, что события будут возвращать его обратно к вам

MORE запрос:

только маленький вопрос по этому вопросу.

Если вы получаете идентификатор магазина и передаете его компоненту в качестве опоры. Так что, конечно, вы могли бы передать еще одну подсказку, которая говорит, что магазин уже понравился? Поэтому получение этих данных с помощью вызова БД к представлению, что позволяет экономить приходится делать чек после его загружен, так что-то вроде:

<favorite-button :storeid="23" :favorited="true"></favorite-button> 

Так, используя свойство Избраного изменить кнопку соответственно ?, поэтому необходимо для checkFavoriteStore вызов и экономия времени на дополнительный HTTP-запрос и т. Д.

Не знаете свой код или что его делать и т. Д., А просто мысль?

EDIT ПОСЛЕ ДОБАВЛЕНИЯ INFO ДОБАВЛЕНО

ОК, так что вы можете изменить ваш запрос HTTP, чтобы сказать:

Vue.$http.post(window.Laravel.baseUrl+'/member/store/favorite/check-favorite', favorite) 
    .then((response) => { 
     console.log('success') 
     console.log(response.data); 
    return response.data; 
    }, (response) => { 
     console.log('success'); 
     console.log(response); 
    return response; 
    }); 

я добавили console.logs поэтому мы можем видеть, Что happing. посмотрим, поможет ли это?

также попробовать добавить возвращение перед, так как он должен вернуться к своему первоначальному вызывающему

return favorite.checkFavorite(payload, 
     data => { 
      commit(types.CHECK_FAVORITE_SUCCESS) 
     }, 
     errors => { 
      commit(types.CHECK_FAVORITE_FAILURE) 
      console.log(errors) 
     } 
    ) 

также комментарий, вам нужно все это сложность именно для этого просто проверить, я не знаю, остальной части вашего кода и конструкции, но, как предполагалось, передавая состояние кнопки в качестве пропеллера (как указано выше) и просто обрабатывать isFavorited вызов внутри самого compnent, поэтому нет необходимости использовать хранилище для этого простого запроса ??

EDIT 2:

, если вам нужно возвратить другой wahy с посыла попытки ::

Vue.$http.post(window.Laravel.baseUrl+'/member/store/favorite/check-favorite', favorite) 
    .then((response) => { 
     console.log('success') 
     resolve(response.data);// replace the return with resolve? 
    }, (response) => { 
     console.log('success'); 
     console.log(response); 
    reject(response.data);// replace the return with reject? 
    }); 

может быть проблема ??

Answer 2

ниже это решение, которое не требует магазина, только мысль может пригодиться:

PHP Страница:

<favorite-button 
     :storeid="{{$storeid}}" 
     :favorited="{{$isFavorited}}" 
     :url="{{route('check-favorite')}}" 
    ></favorite-button> 

    <script> 
     (function(){ 
      import favoriteButton from 'favorite-button'; 
      new Vue({ 
       el : '#app', 
       components : { 
        favoriteButton 
       } 
      }); 
     })(); 
    </script> 

Затем компонент

<style lang="sass"> 
     .heart { 
      color: grey; 
      &.is-favorited { 
       color: red; 
      } 
     } 
    </style> 
    <template> 
     <button class="btn btn-block btn-success" @click.prevent="udateFavorited($event)"> 
      <span class="heart" :class="{'is-favorited' : this.favorited }">&heart;</span>&nbsp;<span :text="{this.favoriteText}"></span> 
     </button> 
    </template> 
    <script> 
     import axios from 'axios'; 
     export default{ 
      props : { 
       storeid : { 
        type: Number, 
        required : true, 
        default :() => {} 
       }, 
       favorited : { 
        type: Boolean, 
        required : false, 
        default : false 
       }, 
       url : { 
        type: String, 
        required : true 
       } 
      }, 
      computed : { 
       favoriteText : function(){ 
        return (this.favorited) ? 'Unfavorite' : 'Favorite'; 
       } 
      }, 
      methods:{ 
       updateFavorited(event){ 
        //-- so update the db so if fasle update to true else if true = false 
        axios.post(this.url, this.storeid) 
         .then(response => { 
          //-- all ok update the visual button 
          this.favorited = response.data.favorited 
         }) 
         .catch(error => { 
          console.log('error'); 
          console.log(error); 
          this.favorited = response.data.favorited 
        }); 

       } 
      } 
     } 


    </script> 

Так в основном на начальное загружая страницу, она передает хранилище, а также то, является ли хранилище фаворитом или нет, а также действие url при событии клика

Затем, когда пользователь нажимает пользователь нажимает на кнопку она будет обновлять БД, а затем текст и цвет сердца, в зависимости от результата

Просто еще одна идеи/решения рассмотреть вопрос, если возникли проблемы ??