Skip to content
This repository has been archived by the owner on Feb 7, 2024. It is now read-only.

Cannot use @Provide and @ProvideReactive simultaneously #249

Open
JiangLiruii opened this issue Aug 26, 2019 · 5 comments
Open

Cannot use @Provide and @ProvideReactive simultaneously #249

JiangLiruii opened this issue Aug 26, 2019 · 5 comments

Comments

@JiangLiruii
Copy link

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.

@gmoneh
Copy link
Contributor

gmoneh commented Aug 30, 2019

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.

@oguimbal
Copy link
Contributor

See PR #264

kaorun343 added a commit that referenced this issue Sep 25, 2019
Fix  Provide/ProvideReactive compatibility (#249)
kaorun343 added a commit that referenced this issue Oct 17, 2019
- Update vue-class-component #266 #262
- Fix Provide/ProvideReactive compatibility #264 #249
@gmoneh
Copy link
Contributor

gmoneh commented Nov 15, 2019

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
Copy link
Contributor

gmoneh commented Nov 15, 2019

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.

@oguimbal
Copy link
Contributor

@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.

kaorun343 added a commit that referenced this issue Mar 17, 2020
Issue #249: Fixed issue on provider producer function when reusing with different…
gmoneh added a commit to gmoneh/vue-property-decorator that referenced this issue Jun 16, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants