在 Vue js 中全局读取配置，如 Mixins

Posted 2023-02-23

【中文标题】在 Vue js 中全局读取配置，如 Mixins

【英文标题】：Read configuration globally in Vue js like Mixins

【发布时间】：2018-08-25 03:08:52

【问题描述】：

我有一个棘手的要求。我想通过调用 API 来读取配置（例如、id、api 等）。然后我想全局保存这些值，以便我的所有 Vue 组件都可以读取它。

我见过mixin。

但它看起来像是通用功能，我必须在我的组件中导入该 mixin。

我怎样才能只执行一次并直接为我的所有组件保存该值？ 我认为这个example 看起来很适合我的要求，但我不明白这是一个好方法吗？

【问题讨论】：

Global Mixin ?

【参考方案1】：

Afaik，3 种方法让你随心所欲。

混心 提供者 Vuex

我个人更喜欢provider，你只需要在需要的时候注入。它可能比 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)