bhoriuchi / vue-deepset

Deep set Vue.js objects

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Not compatible with Vue 3

JamesPoel opened this issue · comments

.use(VueDeepSet) fires the exception:

app.js:43224 Uncaught (in promise) TypeError: Cannot set properties of undefined (setting '$deepModel')

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

import BootstrapVue3 from 'bootstrap-vue-3';

import {createApp, h} from 'vue';
import {createInertiaApp} from '@inertiajs/inertia-vue3';

import * as VueDeepSet from 'vue-deepset';

createInertiaApp({
    resolve: name => require(`./Pages/${name}`),
    setup({el, App, props, plugin}) {
        createApp({render: () => h(App, props)})
            .use(plugin)
            .use(BootstrapVue3)
            .use(VueDeepSet)
            .mount(el)
    },
});

Replacing:

export function install (VueInstance) {
    VueInstance.prototype.$deepModel = deepModel
    VueInstance.prototype.$vueSet = vueSet
    VueInstance.prototype.$vuexSet = vuexSet
}

with:

export function install (VueInstance) {
    VueInstance.config.globalProperties.$deepModel = deepModel;
    VueInstance.config.globalProperties.$vueSet =  vueSet;
    VueInstance.config.globalProperties.$vuexSet = vuexSet;
}

Seems to get the plugin semi-working with Vue3 (although probably isn't backwards-compatible with 1/2), however the plugin also uses Vue.set which is defunct as of Vue3.

@JamesPoel Perhaps this is not the right place for asking something like this, but I'm curious.

Are you using vue-deepset for state management support (Vuex with esteroids) ?

In case this is true, If you are using Inertia, why are you needing and state management layer ?

Please, don't get me wrong, I just want to know because your proposal seems very interested to my.