How access “provided / injected” values from a mixin in VueJS?

Question

I'm trying to access provided / injected values from a mixin in VueJS. I can see those values from any component but not from the mixin. Is what I'm attempting possible?

https://jsfiddle.net/frang/c6c7kqhp/2/1

let myMixin = {
  inject: ['myDependency'],
  created: function() {
    console.log('in mixin', this.myDependency)
  }
}

Vue.component('my-component', {
  inject: ['myDependency'],
  created: function() {
    console.log('in component', this.myDependency)
  }
})

new Vue({
  el: '#example',
  provide() {
    return {
        myDependency: 'here is my value'
    }
  },
  mixins: [myMixin]
})

thanksd · Accepted Answer · 2017-06-13 19:44:10Z

1

The issue is that you are trying to inject the myDependency property in the same Vue instance that you are providing it.

Vue instances that specify a provide property give their child components access to that value via inject. But, you cannot inject the provided value on the same instance.

You need to use the mixin in a child component:

Vue.component('my-component', {
  mixin: ['myMixin'],
  created: function() {
    console.log('in component', this.myDependency)
  }
})

Here's a working fiddle.

edited Jun 13, 2017 at 19:44

answered Jun 13, 2017 at 19:02

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2976753 Over a year ago

Ok, Is there any way to make the mixin global?

thanksd Over a year ago

Make the mixin global? Do you mean some way to specify that each component used in the main vue instance uses the same mixin?

user2976753 Over a year ago

The only issue is that the mixin do not have the injected values when created it self, but when the component is created

thanksd Over a year ago

That's because the vue instance that provides a value cannot access that same value via inject. Only the child components can. That's not a problem with the mixin, that's just how the scope of provided values works.

user2976753 Over a year ago

By the way, do you have any different approach for bootstrap instances in app?

|

Collectives™ on Stack Overflow

How access “provided / injected” values from a mixin in VueJS?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related