Dialog and vuex

[nayils]

Hey. My dialog box contains vuex, l18n, etc.

I create the EditForm.vue file:

<template>
    <DialogCard>
         ......
    </DialogCard>
</template>

<script>
    import { mapGetters, mapActions } from 'vuex';

    export default {
        computed: {
            ...mapGetters({
                items: 'items',
            }),
        },
    }
</script>

And trying to call the dialog box:

import EditForm from './edit-form.vue';
const dialog = await this.$dialog.show(EditForm);

But vuex and l18n are not yet created. Accordingly, I get an error: Cannot read property 'getters' of undefined".

Is there any way to solve this problem in order to connect and use the component in one file?

And one more question. Can I pass parameters to a dialog box?

[yariksav]

All properties of children vue components extends from root vue component. Dialog works separately, therefore you must set all params in installation See in documentation

2) Yes, for passing parameters just put second argument this.$dialog.show(EditForm, { param1: 'test', ...});

[yariksav]

See as this I resolve in nuxt plugin I got from nuxt all context and put it to dialog

[nayils]

In app.js:

var app = new Vue({
  i18n,
  store,
  router,
  ...App
});

const keys = Object.keys(app).filter(key => key.startsWith('$') || ['router', 'i18n', 'store'].indexOf(key) >= 0);
const context = Object.assign({}, ...keys.map(prop => {
    if (app[prop]) return {[prop]: app[prop]};
}));

import VuetifyDialog from 'vuetify-dialog';
Vue.use(VuetifyDialog,
    {
        context: context, //or context,
        error: {
            icon: false
        },
        notification: {
            position: 'bottom-right',
            icon: false
        }
    }
);

Don't work. Nothing changed. Error: "Cannot read property 'getters' of undefined".

[yariksav]

context must have $store, $router, $i18n properties therefore

context = {
  $store: store,
  $router: router,
  $i18n: i18n
}

or take its from app manually.

This code:

const keys = Object.keys(app).filter(key => key.startsWith('$') || ['router', 'i18n', 'store'].indexOf(key) >= 0);
const context = Object.assign({}, ...keys.map(prop => {
    if (app[prop]) return {[prop]: app[prop]};
}));

is just for nuxt logic

[nayils]

In app.js:

import store from '~/store';
import router from '~/router';
import i18n from '~/i18n'; 

....

new Vue({
  i18n,
  store,
  router,
  ...App
});

const context = {
    $store: store,
    $router: router,
    $i18n: i18n
};

import VuetifyDialog from 'vuetify-dialog';
Vue.use(VuetifyDialog, {
        context, // or "context: context",

        error: {
            icon: false
        },
        notification: {
            position: 'bottom-right',
            icon: false
        }
    }
);

In owner.vue:

import EditForm from './edit-form';
const dialog = await this.$dialog.show(EditForm, {
    width: 900,
    scrollable: true
 })

In edit-form.vue

<template>
  <div>{{ test }}</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
export default { 

computed: {
            ...mapGetters({
                buf_items: 'test',
            })
}

mounted() {
  console.log(this.$store); //undefined
  console.log(this.store); //undefined
  console.log(this.getters); //undefined
  console.log(this.mapGetters); //undefined
  console.log(this.$i18n); //undefined
  console.log(this.buf_items); //undefined
},
}
</script>

Apparently I do not understand how the context works..

[yariksav]

show please result of 1) console.log(context) 2) mounted() { console.log(Object.keys(this)) }

[nayils]

In app.js: console.log(context)

Console: Screenshoot

In edit-form.vue:

mounted() {
 console.log(Object.keys(this)) ;
 console.log(context);
}

Console: Screenshoot

[yariksav]

Sorry, context without '$' is correct, try

const context = {
   store,
   router,
   i18n
};

I checked it in my code

And in console.log(this) ->object must have $store, $router, $i18n

[nayils]

Thanks you! It's work!=))