Quasar: Attach $q to store by default

[mesqueeb]

To be able to do this.$q.notify() from a vuex action, I need to add a boot file that does this:

export default ({ app, router, Vue, store }) => {
  store.$q = Vue.prototype.$q
}

I think it's better to do this by default, as it is added to Vue.prototype as well by default.

[purell]

It a matter of opinion but I don't think you should store UI (vue) element in vuex. Vuex is more like a model, or a database (_if compared with back-end side_) if you want.

Displaying a notification box or a loading message should remain the responsibility of the view.

If you absolutely want to use Vuex this way, I would rather use a multiple state like

// States in the store
message: {
  show: false;
  message: null,
  type: 'info',
}

// Mutation
messageChanged(state, newMsg) {
    state.message = newMsg;
}

// Action
doSomething(store) {
  new Promise(resolve => {
      store.commit('messageChanged', {
         show: true;
         message: 'Starting something',
         type: 'info',
      });
      resolve();
  });
}

On the vue side, you could watch this state

new Vue({
  el: '#q-app',
  data: function () {

  },
  created() {
     // Call you action, this will mutate the store's message value
     this.message();
  },
  methods: {
      ...mapActions('myStore', ['doSomething']),
  },
  computed: {
     ...mapState('myStore', ['message']),
  },
  watch: {
     // Watch the store's message state
     message(newMsg) {
         if (newMsg && newMsg.show) {
            this.$q.notify(...)
         } else {
           // Hide notify
         }
    },
  }
})

[mesqueeb]

Dear @purell Thanks for your post.
I love these kind of discussions on state management. And I have so few friends to exchange opinions on Vuex usage with!

I actually handle most of my modules as the local database with api connections for synchronising modifications.

However, I have a "selection" module which so many different components depend on, so I made it as a vuex module. This selection module is responsible for keeping track of selected items and is the module that fires actions to the other DB-like modules.

Eg. I would dispatch('selection/delete') from a Vue component to delete the currently selected item and clear the selection.
I would also dispatch this same action from eg. a hotkey with a keydown listener.

In my case it makes most sense to also notify the user of the item deletion (with the option to undo) right from that selection/delete action. Otherwise I'll have to add this notify() call in all places I call dispatch('selection/delete') from! 🧼

I'd love to hear your opinion on my use case!!!

[pdanpdan]

Just import notify in vuex file and use it. If the plugin is active in conf it will work exactly as this.$q.notify

[rstoenescu]

Hi,

This would break on SSR builds. Recommended usage is through the second option -- see "usage outside of a .vue file" examples.

// outside of a Vue file
import { Notify } from 'quasar'

Notify.create('Danger, Will Robinson! Danger!')
// or with a config object:
Notify.create({
  message: 'Danger, Will Robinson! Danger!'
})

[wwwizzarrdry]

This is a more common scenario than you might imagine @mesqueeb.