How to call notifications from vuex actions?

[rajashekarappala]

No description provided.

[crediblebytes]

Was wondering the exact same thing.

[FrederikVanhollebeke]

Any update on this topic?

[se-panfilov]

Hi folk,

That's honestly a good question.

The initial idea was just to organize notifications in a better way inside components. So I didn't implement any strategy to call notifications outside the component.

The only implementation of this strategy I can imagine - is to have a sort of a global pool for notifications. And call notifications from actions in a way like this.vueNotifications.globalPool.componentName.notification(). But that's not much better that do it via refs: this.$refs.component.notification(): in both case you might be in a trouble in case of lazy load, for instance.

So I'd say we have 3 options right now:

1. I don't really remember, but I guess dispatch returns a promise (at least it can), so you could do something like this:

Vue.component('app', {
  methods: {
    foo() {
      this.$store.getters.getTodos.then(() ={
        //show notification here
      })
    }
  }
})```

2. You can call notifications directly, without "vue-notifications"
3. You can suggest an approach and I can add it ;)

[Berkmann18]

Was there any success in using this package with Vuex?

[heliomsolivas]

Any updates about this question?

[lilcryptopump]

Maybe my solution is not the best or correct one, but it works and I'm okay with that 🤣

Here is my code from main.js

// Notifications
import VueNotifications from 'vue-notifications'
import Noty from 'noty'// https://github.com/needim/noty
import './../node_modules/noty/lib/noty.css'
import './../node_modules/noty/lib/themes/mint.css'
import {Howl} from 'howler';

Noty.setMaxVisible(10);

function toast({message, type, timeout}) {
    let layout = 'bottomRight';
    let callbacks = {
        onShow: function () {
            if (store.state.sound) {
                new Howl({src: [require('./assets/audio/up-down-tap.mp3')]}).play()
            }
        }
    }
    if (type === VueNotifications.types.warn) type = 'warning'
    return new Noty({text: message, timeout, type, layout, callbacks}).show()
}

const notification_options = {
    success: toast,
    error: toast,
    info: toast,
    warn: toast,
}
Vue.use(VueNotifications, notification_options)

I'm using Noty and also I add sound with Howler. Then I pass toast in my app function

const app = new Vue({
    router,
    store,
    toast,
    render: h => h(App),
});

Then a pass app to store. (Based on this vuejs/vuex#1399)

store.$app = app;
app.$mount('#app')

And now I can call toast from my Vuex actions like this:

 this.$app.$options.toast({message:"Hello", type: "error", timeout: 3000})

[lazytosay]

@lilcryptopump this helps!!!! Thank you so much!