Vuetify v-bottom-sheet 转换完成后调用函数？异步 vuex 突变？异步计算属性？答案

【问题标题】：Call function after Vuetify v-bottom-sheet transition completes? Async vuex mutation? async computed property?Vuetify v-bottom-sheet 转换完成后调用函数？异步 vuex 突变？异步计算属性？
【发布时间】：2021-03-25 16:07:26
【问题描述】：

我已经使用 Vuex 和 Vuetify 的 v-bottom-sheet 构建了一个模态。基本上它的工作原理是当sendMessageModal 的状态为真时，它会在计算属性中被拾取并显示模态，反之亦然：

//Vuex mutation

toggleSendMessageModal(state) {
    return state.sendMessageModal = ! state.sendMessageModal;
}

//Vuex Action

closeSendMessageModal(context) {
    return new Promise((resolve, reject)=>{
    context.commit('toggleSendMessageModal');

    setTimeout(1000);
    const error = false;

    if(!error){
        resolve();
    } else {
        reject();
    }
    });
}

//SendMessageModal Component

computed: {
    showSendMessageModal() {
        return this.$store.state.sendMessageModal;
    }
},
methods: {
    closeSendMessageModal(){
        this.$store.dispatch('closeSendMessageModal').then(function() {
            this.clearValues()
        }.bind(this));
    },
    clearValues: function(){
        this.subject = '';
        this.body = '';
        this.slide = 1;
    },
}

我想做的是clearValues() 在模式关闭之后。我目前可以这样做的唯一方法是，如果我设置这样的超时时间：

//SendMessageModal Component
closeSendMessageModal(){

    this.$store.dispatch('closeSendMessageModal').then(function() {
        setTimeout(function(){ this.clearValues(); }.bind(this), 1000);
        
    }.bind(this));
},

但我想等待模式关闭然后clearValues()。问题是如果有人想立即再次重新打开模式。

请注意，模式上有一个过渡，但我认为toggleSendMessageModal 不允许模式关闭然后清除值。

Vuetify 的 CSS 过渡 Gif。而here 是我的完整组件代码。

编辑 2

不知道是不是 vuetify 的问题。

我在closeSendMessageModal 操作上设置了超时时间：

closeSendMessageModal(context) {
    return new Promise((resolve, reject)=>{
    //context.commit('toggleSendMessageModal');

    setTimeout(function(){ context.commit('toggleSendMessageModal'); }.bind(this), 1000);

    const error = false;

    if(!error){
        resolve();
    } else {
        reject();
    }
    });
}

this.clearValues(); 方法在解决 closeSendMessageModal() 操作之前仍在命中。

【问题讨论】：

用 gif 编辑帖子
很抱歉我无法进行过渡，因为它使用的是 vuetify 库。还有什么我可以做的吗？
Here's a gist
SetTimeout 确实有效，但我看到的问题是如果有人想立即再次重新打开模式。
顺便说一句，目前还不清楚你为什么要等待，我认为你的问题中没有提到过。 gif 中唯一的问题似乎是 setTimeout 延迟

标签： vue.js asynchronous vuetify.js vuex

【解决方案1】：

这更像是一个问题而不是一个答案，但可能两者兼而有之。您不能为此使用 nextTick 吗？例如：

methods: {
    closeSendMessageModal(){
        this.$store.dispatch('closeSendMessageModal');
        this.$nextTick(() => this.clearValues());
    },
    clearValues: function(){
        this.subject = '';
        this.body = '';
        this.slide = 1;
    },
}

【讨论】：

不幸的是，同样的事情一直在发生，感谢您的帮助
您的过渡不是在等待幻灯片为 1 对吗？还是跟幻灯片有什么关系？
不，基本上在关闭幻灯片上slide = 2 我想要的是幻灯片保持在幻灯片 2 上直到关闭，然后在 this.clearValues() 之后更改为幻灯片一