child reactivity about vue-kindergarten HOT 6 CLOSED

I have a workaround to use store instead of the user state inside the store as child:

// in app.js
Vue.use(VueKindergarten, {
    child: (store) => store,
});

and

// in perimeters/BasePerimeter.js
export default class BasePerimeter extends Perimeter {
    isAdmin() {
        return allowed = !!this.child
            && this.child.getters['auth/isLoggedIn']
            && this.child.getters['auth/isAdmin'];
    }
...

Inside my store's auth module, I encapsulates the logic to check admin access in the getter isAdmin. And it works!

I would be glad to hear any improvements or suggestions.

Thanks!
Zhu Ming

from vue-kindergarten.

Hey @blackpuppy,

I usually put the getter of a current user to separate file for example src/child.js, because this way I can also use it wherever I want. The best way to assure that reactivity will work is to make child a function:

// src/child.js
import store from '@/store';

export default () => () => store.state.users.current;

import Vue from 'vue';
import VueKindergarten from 'vue-kindergarten';
import child from '@/child';

Vue.use(VueKindergarten, {
    child,
});

And you can use it like this:

import { Perimeter } from 'vue-kindergarten';

export default class BasePerimeter extends Perimeter {
  isLoggedIn() {
    return !!this.child() || false;
  }
  isAdmin() {
    return this.child().role === 'admin';
  }
}

Please let me know if it works for you.

from vue-kindergarten.

@blackpuppy @wdews I have fixed the issue with child reactivity, so it will work even if child references a property in the store. You can upgrade 🎈

from vue-kindergarten.

@JiriChara

The fix works as expected.

I changed the child to return my user directly as below:

export default (store) => store ? store.state.auth.user : null;

Now I use Vuex store modules, and user is in the module auth's state.

And I changed my BasePerimeter as below:

import { Perimeter } from 'vue-kindergarten';

export default class BasePerimeter extends Perimeter {
    isAdmin() {
        return this.child && this.child.role &&
            this.child.role.name === 'Administrator';
    }

    isAccountManager() {
        return this.child && this.child.role &&
            this.child.role.name === 'Account Manager';
    }
}

Then the previous problem does not happen. From UI, I see that the menu items shown are always the ones for the user I log in as.

Thanks!
Zhu Ming

from vue-kindergarten.

What if I need to override the constructor in my BasePerimeter class, what are the parameters I have to supply to super() then, for everything to continue working as expected? For example, I use constructor() to generate class methods dynamically for isAdmin, isWhatEver, based on roles array.

from vue-kindergarten.

I think I got it to work, by looking at Perimeter.js class, then passing in purpose, opts = {}.

from vue-kindergarten.