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商店

上的操作

结果将返回响应

如何获得回复？

更新

我对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

如果您返回结果，则将调用分配给变量tyr：

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

然后您可以通过var res访问响应。我相信这些事件会把它还给你回复

更多查询：

对此我只是一个小问题。

如果您获取商店ID并将其作为道具传递给组件。所以你肯定还可以通过另一个道具，告诉商店是否已被喜欢？因此通过数据库调用获取此数据到视图，从而节省了在加载后进行检查，如下所示：

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

所以使用favorited属性相应地更改按钮？所以需要checkFavoriteStore调用并节省额外的http请求等时间

不知道你的代码或它的作用是什么，但只是一个想法??

添加添加信息后编辑

好的，你可以改变你的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)
        }
    )

同样是评论，你是否需要所有这些复杂性只是为了这个简单的检查，我不知道你的代码和构造的其余部分，但建议传递按钮的状态作为道具（如上）和只是在compnent本身内处理isFavorited调用，所以不需要使用这个简单请求的存储？

编辑2：

如果您需要使用promise ::

返回另一个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>

所以基本上在初始加载页面时，它会传递storeid，以及商店是否已被收藏，以及点击事件的url操作

然后当用户点击用户点击按钮时，它将更新数据库，然后根据结果更新心脏的文本和颜色

考虑是否存在问题只是另一个想法/解决方案？

如何在vue.js 2上获得响应ajax？

2 个答案: