在像Mixins这样的Vue js中全局读取配置

时间:2018-03-16 06:01:50

标签: javascript vue.js vuejs2 vue-component axios

我有一个棘手的要求。我想通过进行API调用来阅读配置(ex,id,api等)。然后我想全局保存这些值,以便我的所有Vue组件都可以读取它。

我见过mixin

但它看起来像是广义功能,我必须在我的组件中导入mixin。

我怎么能只这样做一次并直接保存所有组件的值? 我认为这example看起来很适合我的重新定型,但我无法理解这是一个好方法吗?

1 个答案:

答案 0 :(得分:2)

Afaik,有3种方法可以做到你想要的。

  • 密新
  • 提供商
  • Vuex

我个人更喜欢提供者,您只需要在需要时注射。它可能比mixin溶液轻。

这是快速预览。

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)
  }
}