vue.js 2で応答ajaxを取得する方法は？

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> 

スクリプトが実行された場合、それは、それはvuexストア

上のアクションを呼び出しますcheckFavoriteStore方法により

最初checkFavoriteStoreメソッドを呼び出します。そして、結果がします応答を返す

どのように応答を得るには？

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 
} 

とAPI：

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

あなたが、その後の呼び出しを割り当てて結果を返す場合そのような変数：

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

の場合は、resという名前で応答にアクセスできます。この上

ほんの少しの質問：私は、イベントがあなたに戻って

MOREクエリをそれを返すと確信しています。

店舗IDを取得し、これを小道具としてコンポーネントに渡すとします。だから確かに店がすでに好きかどうかを伝える別の小道具を渡すこともできますか？そのために必要な？

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

ので、それに応じてボタンを変更するには、お気に入りに登録プロパティを使用して：だからので、そのロードされた後にチェックを行うために持っ節約、ビューへのdb呼び出しを介してこのデータを取得し、そのようなものは、 checkFavoriteStore追加のhttpリクエストなどで電話をかけて時間を節約する

あなたのコードやその動作などは分かりませんが、ちょっと考えましたか？ OK ADDITION INFO ADDED

はそうあなたが言うようにHTTPリクエストを変更することができAFTER

EDIT：

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

我々はいただきました！がhapping見ることができるので、私はconsole.logsを追加しました。これが役立つかどうかを見てみましょうか？

も、それが元の呼び出し元に戻るには

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

を必要としても、コメントを目の前でリターンを追加してみてください、あなたはこのためだけにすべてのこの複雑性を必要とするか、単に私が知らない、確認してくださいあなたのコードと構造の残りの部分は、上記のようにボタンの状態で渡して（単に）上記のように渡して、単にcompNent内でisFavorited呼び出しを処理するように提案しました。

EDIT 2：

あなたが約束トライ::

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? 
    }); 

が問題になる可能性がありますし、別のwahyを返却する必要がある場合は？

以下

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> 

ページをロードし、storeidを渡し、ストアが既にお気に入りであるかどうか、クリックイベントのURLアクション

ユーザがボタンをクリックすると、DBに更新され、結果に応じてテキストと心臓の色が更新されます。

問題がある場合は、もう一度検討してください。