Quasar: Invoking custom component doesn't have $store injected

[mesqueeb]

When I invoke a custom component into Dialog plugin that component doesn't receive $store injected to it.

Related #3289

[rstoenescu]

Will be available in Quasar beta.21.
Usage example:

this.$q.dialog({
  component: CustomComponent,

  // optional if you want to have access to
  // Router, Vuex store, and so on, in your
  // custom component:
  root: this.$root, // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

  // props forwarded to component
  // (everything except "component" and "root" props above):
  text: 'something',
  // ...more.props...
}).onOk(() => {
  console.log('OK')
}).onCancel(() => {
  console.log('Cancel')
}).onDismiss(() => {
  console.log('Called on OK or Cancel')
})

[mesqueeb]

Dear @rstoenescu
Does this method only work with this.$q.dialog ?
I use Dialog.create outside of Vue files in many places, and I still want to use the store.

Currently I'm doing this in my actual Dialog component I feed into Dialog.create() as a work-around to this problem:

created () { this.$store = window.store }

[tmikaeld]

Can we also get access to the vm in Vuex as well, please.

[rstoenescu]

@tmikaeld your description is a little vague, but regardless, you can send as the payload when you call the mutation etc. Also, if you won't be using arrow functions on your mutations (just an example) then this will point to the Store object which has access to the Router etc.

Dear @mesqueeb, you first need to understand what a beautiful piece of work the Dialog plugin is :) It renders content not inside of your main App Vue instance (nor should it do that!), but creates ad-hoc Vue instances. Which need to inherit props from the main App Vue instance, which is why the root prop is needed. So Dialog.create() works if you supply that root instance too. But you do need it. At least the first you use Dialog, because root param is not needed for any subsequent calls.

[tmikaeld]

@rstoenescu Passing the payload during the mutation is what I'm currently doing, this avoids having to import all objects again if I'm doing a big vuex flow like:

SFC -> Submit form -> Dispatch to store -> Make axios request -> Handle response -> Show notification -> Return resolve/reject to SFC

I did check the stores thisbefore passing the vm from the SFC, however, this doesn't have booted components like axios or i18n.

Denjell suggested to use custom components instead, however, I find it difficult to re-use.

What methods do you suggest?

[mesqueeb]

@rstoenescu
I'm a little bit confused about this:

So Dialog.create() works if you supply that root instance too

However, in your example:

root: this.$root,

From where can we retrieve $root when outside of a vue file?

[rstoenescu]

@mesqueeb "So Dialog.create() works if you supply that root instance too" --> "works with Router, Vuex etc if you supply that root instance"

It's what I'm trying to point out. When using the Dialog plugin, it can also work when outside of a Vue file, which is the beauty of it. That it works outside of your App's Vue instance too. However, if you want to access Router, Vuex etc and don't have a way to get that instance (there's no generic solution; it's on a case by case basis) then you'll have to use it without those, or find other ways to import them, like you already did in your app.

This is a case where Quasar offers a lot of power to the developer, and the developer then also wants magic ("more, more, more!") to happen on it (like auto-figuring out the root instance by itself). As a sidenote: it could be possible to do it but the solution would be working only with Quasar CLI
(so no UMD, no Vue CLI) and there would be other restrictions in place that you will definitely not like :)

Bottom line: Dialog works outside of your main app Vue instance, which is one of its reasons for existing.. to supply this "dialog" functionality even if outside of Vue.