Vue: Inject option in mixin no longer works

[kasperisager]

Version

2.4.1

Reproduction link

https://jsfiddle.net/d92sL0zy/2/

Steps to reproduce

1. Create mixin that sets the inject option
2. Create component that uses said mixin
3. Use component in context with a corresponding provide

What is expected?

The data provided in the context is correctly injected into the component that uses the mixin with the inject option set.

What is actually happening?

The data provided is _not_ injected into the component that uses the mixin, unless the inject option is specified directly on the component and not in the mixin.

---

I use the pattern of specifying provide and inject options on mixins extensively, as this provides some really useful mixins for specifying relationships between different components. A component using a hasOne() mixin would for example provide itself to a child which would then use a memberOf() mixin to inject the parent. As of Vue 2.4.0 , this however no longer works as the inject option of the memberOf() mixin is ignored.

[jkzing]

Sorry, it should be introduced by https://github.com/vuejs/vue/pull/5827. My fault...😭

Will try to fix it...

[kasperisager]

No worries! Reverted to 2.3.4 in the meantime, so no harm done 👌

[frandiox]

This also happens when trying to extend a component that implements inject with the new Vue({ extends: ... }); syntax. I guess it's the same issue.

[jkzing]

@frandiox Yes, it's the same root cause, and will be fixed once https://github.com/vuejs/vue/pull/6098 or https://github.com/vuejs/vue/pull/6107 get merged.

Sorry for that...

[javoski]

Before this have been fixed, you can customize the merge strategy of inject option to make a workaround. Some kinda like:

Vue.config.optionMergeStrategies.inject = function (parent, child) {
  return Vue.util.extend(Vue.util.extend({}, parent), child)
}