Akryum / vue-supply

Create resources that can automatically be activated and deactivated when used (like subscriptions)
159 stars 16 forks source link

[Vue supply & vue-meteor-tracker v2.0.0-beta.4] this.$supply.XXX.$subReady not reactive #15

Open mathieustan opened 6 years ago

mathieustan commented 6 years ago

Hello @Akryum,

it looks like subscriptions in vue supply aren't reactive in computed property.

Exemple:

export default {
    name: 'Todo',
    mixins: [use('Todo')],
    computed: {
        isReady() {
            // this.$supply ==> undefined;
            const subsReady = get(this.$supply, 'Todo.$subReady', {});
            return !isEmpty(subsReady) && 
                Object.values(subsReady).every(sub => sub);
        },
    }

Vue meteor tracker only looks for reactivity in this.$data.$meteor but subs from supply aren't registered here.

SebT commented 5 years ago

I have a similar problem, this.$supply is undefined the first time your computed prop is evaluated.

Looking at the source code (https://github.com/Akryum/vue-supply/blob/master/src/index.js#L37), this is because this.$supply is set on the created hook. So the first time the computed is evaluated, this.$supply does not exist.

With this code :

computed: {
  myComputed () {
    console.log('$supply defined ?', Boolean(this.$supply));
    return this.$supply ? this.$supply.mySupply.someData : null;
  }  
}

I see a first log saying this.$supply is undefined. Then, unless this.$supply.mySupply.someData changes, the computed will never be re-evaluated (so always null). Because there is no reactivity on this.$supply itself that is set AFTER the first computed evaluation. So once this.$supply is set, no evaluation of myComputed is triggered.

It seems that simply grasping the supply on beforeCreate instead of created fixes the problem. Or you can make sure not to access your computed value before the created hook. In my case, myComputed was evaluated too soon because I was using watch on a computed value derived from the supply. Using $watch instead on the created hook fixed my problem.

Would it cause issues to use the beforeCreate hook to set this.$supply @Akryum ?