vue-property-decorator icon indicating copy to clipboard operation
vue-property-decorator copied to clipboard

Cannot use @Provide and @ProvideReactive simultaneously

Open JiangLiruii opened this issue 5 years ago • 5 comments

I can run them expectly by seperately, but if I conbine them together, like

@Component
export default Parent extends Vue {
    @Provide() private name = 'xxx';
    @ProvideReactive() private age = 24;
}

then, the children of class Parent can only get @Provide properties. it will report an error if any child reference age, like @InjectReactive() private age!: number, the error message is[Vue warn]: Injection "__reactiveInject__" not found.

I explored your source code and found that your Provide method and ProvideReactive method definitions both use same judgement(line 54-55 && line 76-77)

var provide = componentOptions.provide;
if (typeof provide !== 'function' || !provide.managed) {
...
}

so , if use any one of them , the else will never has opportunity to change this componentOptions's provide property, which cause my problem.

There is some ways to walk around, use @ProvideReactive firstly, or use in seperately in deffrents components. I'm note sure this is designed on purpose or what , whick make me some inconvenient.

JiangLiruii avatar Aug 26 '19 08:08 JiangLiruii

Was going to report this, and saw that someone beat me to it... It only works if the ProvideReactive is used first. Otherwise, the reactiveInject key in the provide object returned by the function is never created.

gmoneh avatar Aug 30 '19 21:08 gmoneh

See PR #264

oguimbal avatar Sep 24 '19 18:09 oguimbal

This PR actually completely broke the ProvideReactive/InjectReactive feature. Before, it would at least work if you declared your reactive injections before the non-reactive ones. Now, any reactive injection produces the error: Injection "reactiveInject" not found

gmoneh avatar Nov 15 '19 18:11 gmoneh

See PR #281 for a proposed fix. Strategy: The problem arises because both the @Provide and @ProvideReactive decorators are competing to install a provide function in the component options. So whichever one is used first is the one who wins (because of the condition that was there to avoid doing it more than once). The strategy taken in this fix is to have only one possible provide function, which is aware of both regular injections and reactive injections, and will produce the appropriate provide options object with both types of properties.

gmoneh avatar Nov 15 '19 20:11 gmoneh

@gmoneh Well it worked for us (??), and I must admit I did not have the time to think it further once I solved what was blocking us. But yea, i'm quite not suprised that some problems remained. It seemd to be too much of a quick copy paste from the non reactive version to work properly. And to be honest, I ended up implementing our own injection attributes for other reasons. So i'm sorry if this PR broke something.

oguimbal avatar Nov 17 '19 14:11 oguimbal