I am currently facing a challenge while trying to utilize the ToastController of Ionic outside a vue instance. I have created a separate actions file which will be loaded within the vue instance, handling a request. Within this request, certain validations are performed and I wish to display a toast notification when necessary. While I can easily achieve this using this.$ionic.toastController.create() within the vue instance, the absence of a vue instance in the external file is causing difficulties for me to import the ToastController and make it work.
Could someone provide guidance on how to overcome this obstacle?
I have explored various options and searched extensively online for solutions. Due to the fact that Ionic 4 with vue.js is still in alpha stage, support is limited at the moment. I have also experimented with the @modus/ionic-vue instance, which seems to function better than the original Ionic version currently.
The relevant code snippet is executed during a this.$store.dispatch(RESERVATION_REQUEST) call as shown below:
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,
}
To invoke the above code, use the following method:
toggleReservation(lesson, date) {
const team = this.$store.getters.getCurrentId;
this.$store.dispatch(RESERVATION_REQUEST, { lesson, date, team });
}
I would greatly appreciate any assistance with this issue as I have been searching for a solution for several days now and although I feel like I am making progress, I have yet to find a definitive resolution.