Read configuration globally in Vue js like Mixins

Question

I have a tricky requirement. I want to read the configuration (ex, id, api etc) by making a API call. Then i want to save this values globally so that my all Vue components can read this.

I have seen mixin.

But it looks like it is for generalized functionality and i have to import that mixin in my component.

How can i do this only once and save that values for all my components directly? I think this example is looks like suitable for my requinment but i am not able to understand that is this a good way?

Answer 1

Afaik, 3 ways to do it what you want.

• Mixin
• Provider
• Vuex

I personally prefer provider, you just need to inject when you need it. Its probably lighter than mixin solution.

Here is quick preview.

export default {
  name: 'RootComponent',
  provide () {
    let provider = {}
    Object.defineProperty(provider, 'appSettings', {
      iteratable: true,
      get: () => this.appSettings
    })
    return provider
  },
  data () {
    return {
      appSettings: {}
    }
  },
  mounted () {
    this.yourApiCall().then((result) => {
      this.$set(this.$data, 'appSettings', result)
    })
  }
}

export default {
  name: 'SubComponent',
  inject: ['appSettings'],
  mounted () {
    console.log(this.appSettings)
  }
}