Can't access Vuex from a custom view component.

[nicroto]

I am using vuejs-dialog in a NUXT project.

My modals are with custom rendering (component).

Here is my setup:

// ~/nuxt.config.js

export default {
    ...
    plugins: [
        ...
        {src: "~/plugins/vuejs-dialog", ssr: false},
        ...
    ]
    ...
};

// ~/plugins/vuejs-dialog.js

import Vue from "vue";
import VuejsDialog from "vuejs-dialog";
import CustomModal from "~/components/modal-custom.vue";

Vue.use (VuejsDialog);

Vue.dialog.registerComponent ("my-custom-modal", CustomModal);

And my custom component:

<template>

    <div>
         {{ customProp }}
    </div>
</template>

<script>

export default {

    name: "MyCustomModal",

    computed: {

        customProp: function () {

            return this.$store.getters ['some-store/GET_SOMETHING'];
        }
    }
};

</script>

<style lang="stylus">
</style>

The problem

$store is not available to the component and I get the following error:

vue.runtime.esm.js:3142 Uncaught TypeError: Cannot read property 'getters' of undefined
    at VueComponent.url (modal-social-sharing.vue?./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options:72)
    at Watcher.get (vue.runtime.esm.js:3137)
    at Watcher.evaluate (vue.runtime.esm.js:3244)
    at VueComponent.computedGetter [as url] (vue.runtime.esm.js:3500)
    at eval (eval at mounted (modal-social-sharing.vue?./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options:NaN), <anonymous>:1:6)
    at VueComponent.mounted (modal-social-sharing.vue?./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options:83)
    at callHook (vue.runtime.esm.js:2916)
    at Object.insert (vue.runtime.esm.js:4149)
    at invokeInsertHook (vue.runtime.esm.js:5944)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js:6163)

Is $store getting passed to the created dialog?

[fmay]

Same problem for me when dispatching an action in the Vuex store.

[Godofbrowser]

The context of the dialog is different from that of your app. You'll need to pass the store to the plugin. I'll look into this in my spare time, possibly a new feature

[damacodev]

Hi, this is my custom view on nuxt

// ~/components/vuejs-dialog.vue
<template>
    <div class="dg-view-wrapper">
        <div class="dg-content-body" style="border-bottom: none;">
            <div class="dg-content" style="margin-bottom: 15px;">Apakah anda yakin untuk me-reject pengajuan ini ?</div>
            <form autocomplete="off" class="dg-form" style="border: 1px solid #E1E6EA;border-bottom: none;border-top-left-radius: 4px;border-top-right-radius: 4px;">
                <label for="dg-input-elem" style="font-size: 13px;">Type "Antu" below to confirm</label>
                <input type="text" placeholder="Antu" autocomplete="off" id="dg-input-elem" style="width: 100%; margin-top: 10px; padding: 5px 15px; font-size: 16px; border-radius: 4px; border: 2px solid rgb(238, 238, 238);">
            </form>
        </div>
        <div class="dg-content-footer" style="background-color: ghostwhite;border: 1px solid #E1E6EA;border-top: none;border-bottom-left-radius: 4px;border-bottom-right-radius: 4px;padding: 0 10px 10px;">
            <button class="dg-btn dg-btn--cancel">
                <span>Tidak</span>
            </button>
            <button disabled="disabled" class="dg-btn dg-btn--ok dg-pull-right">
                <span class="dg-btn-content">
                    <span>Ya, Reject</span>
                </span>
            </button>
            <div class="dg-clear"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "MyCustomModal",
};
</script>

In my custom view,

1. how to close the dialog ?
2. how to get input value ?

[Blanen]

@Godofbrowser Any progress or maybe an idea for a workaround?

[peel70]

Hi guys, in main.js of the application:

` import VuejsDialog from "vuejs-dialog";

import store from './store' Vue.use(VuejsDialog, { store }) ` then you have the store in the options of the plugin

in the Plugin.prototype.mountIfNotMounted function you have to pass this to the Dialogconstructor

let Vm = new DialogConstructor( { store: this.options.store } )

[Godofbrowser]

Although this feature is not available in the legacy version of this plugin, it is available on the latest version which has been rewritten for vue3. Please see: https://github.com/Godofbrowser/vuejs-dialog/blob/fee48f8fd668e55015abdb47211a3352ff94ace5/src/plugin/promise.dialog.ts#L72-L77

I'll leave it open for now as a lot of projects still run vue2 i assume and I'm open to simple solutions to this issue if you find one pending when I am able to take a look again.