Question

我正在尝试在vue实例之外使用Ionic的ToastController；我已经建立了一个单独的动作文件，该文件将被加载到处理请求的vue实例内部。在此请求期间，它会进行一些验证，我想在发生某事时举杯敬酒。在vue实例中，我可以做到这一点。$ ionic.toastController.create（）可以正常工作，但在另一个文件中，没有vue实例可用，因此我试图将ToastController导入到那里，但无法完成这项工作

有人可以为此指出正确的方向吗？

我已经尝试了几种选择，并在互联网上搜索了此信息；由于带有vue.js的ionic 4仍处于Alpha状态，因此目前支持率非常低。我还将使用@ modus / ionic-vue实例，该实例目前比ionic本身的效果更好

在this。$ store.dispatch（RESERVATION_REQUEST）调用期间将调用实际代码，请参见示例：

import { ToastController } from '@modus/ionic-vue'
import axios from 'axios'

const state = {
    status: '',
    classes: {},
}

const getters = {
    //
}

const actions = {
    [RESERVATION_REQUEST]: ({ commit, dispatch }, data) => {
        return new Promise(( resolve, reject ) => {
            axios({ url: 'reservation/create', data: { lesson: data.lesson, date: data.date, team: data.team }, method: 'POST' })
                .then(response => {
                    ToastController.create({
                        duration: 2000,
                        header: 'Confirmation',
                        message: 'Success',
                        position: 'top',
                        showCloseButton: true,
                        closeButtonText: 'Ok',
                    }).then(toast => toast.present());
                    resolve(response)
                })
                .catch(error => {
                    ToastController.create({
                        duration: 2000,
                        header: 'failed',
                        message: error.toString(),
                        position: 'top',
                        showCloseButton: true,
                        closeButtonText: 'Ok',
                    }).then(toast => toast.present());
                    reject(error)
                });
        });
    },
}

const mutations = {
    //
}

export default {
    state,
    getters,
    actions,
    mutations,
}

上面的代码将被这样调用：

toggleReservation(lesson, date) {
    const team = this.$store.getters.getCurrentId;
    this.$store.dispatch(RESERVATION_REQUEST, { lesson, date, team });
}

如果有人可以帮助我，那会很好；正在寻找几天，感觉我处在正确的轨道上，但尚未找到解决方案。

Answer 1

您可以直接进行操作，然后在您的vue实例中捕获$ store.dispatch

商店：

const actions = {
    [RESERVATION_REQUEST]: ({ commit, dispatch }, data) => {
        return new Promise(( resolve, reject ) => {
            axios({ url: 'reservation/create', data: { lesson: data.lesson, date: data.date, team: data.team }, method: 'POST' })
                .then(response => {
                    resolve(response)
                })
                .catch(error => {
                    reject(error)
                });
        });
    },
}

Vue文件：

toggleReservation(lesson, date) {
    const team = this.$store.getters.getCurrentId;
    this.$store.dispatch(RESERVATION_REQUEST, { lesson, date, team })
            .then(response => {
                this.$ionic.toastController.create({
                        duration: 2000,
                        header: 'Confirmation',
                        message: 'Success',
                        position: 'top',
                        showCloseButton: true,
                        closeButtonText: 'Ok',
                    }).then(toast => toast.present());
            })
            .catch(error => {
                 this.$ionic.toastController.create({
                        duration: 2000,
                        header: 'failed',
                        message: error.toString(),
                        position: 'top',
                        showCloseButton: true,
                        closeButtonText: 'Ok',
                    }).then(toast => toast.present());
            });

}

PS：axios返回了一个承诺，因此，如果您愿意，可以直接在商店中将其返回

const actions = {
    [RESERVATION_REQUEST]: ({ commit, dispatch }, data) => {
        return axios({ url: 'reservation/create', data: { lesson: data.lesson, date: data.date, team: data.team }, method: 'POST' })
    },
}

在Vue实例外使用Ionic ToastController

1 个答案: