Vue继续成功回调

Question

我有一个带有 Vuex 依赖项的 Vue 应用程序。程序逻辑是Facebook分享成功后发送消息。

这是在点击按钮时触发发送消息的方法：

onSubmit() {
    if(this.shouldShowShareModal){
        this.$store.dispatch('openModal', 'SHARE_MODAL');
        return;
    }

    this.$store.dispatch('sendMessage', {
        conversation_id: this.conversationId,
        message        : this.messageText,
        message_type_id: 1
    }).then(() => {
        this.messageText = '';
        this.scrollToBottom();
    });
},

openModal 只是将给定模式的值设置为 true，因此v-if 显示具有按钮的模式，该按钮在share 方法触发 Facebook 分享：

share() {
    var self = this;
    FB.ui({
        method: 'share',
        href: 'https://developers.facebook.com/docs/'
    }, function(){
        self.$store.dispatch('sharedThroughFacebook');
        self.$store.dispatch('closeModal', 'SHARE_MODAL');
    });
}

现在我遇到的问题是如何在 Facebook 回调成功后继续发送消息？目前使用sharedThroughFacebook 我只是将商店共享标志设置为true，但我不确定仅在成功回调后发送消息的最佳方法？如果我将数据推送到模态，那似乎是一个肮脏的解决方案，并且模态不应该知道消息状态。另一方面，将对话 ID、消息、类型和文本放在 Vuex 存储中似乎是一种开销，因为该组件是唯一使用数据的组件。

Answer 1

你可以像这样编写你的动作

actions: {
  async share ({ dispatch, commit }) {
    await dispatch('sharedThroughFacebook') // wait for `sharedThroughFacebook` to finish
    await dispatch('closeModal') // close the modal before sending the message
    commit('sendMesseage') 
  },
  async sharedThroughFacebook (context, payload) {
     FB.ui({
        method: 'share',
        href: 'https://developers.facebook.com/docs/'
    })
 }
}