时间戳

首页 > 解决方案 > 在 vue js 客户端中存储 api 配置的正确方法

javascript - 在 vue js 客户端中存储 api 配置的正确方法

问题描述

我有一个与 api 通信的 Vue.js SPA。这个 api 有一个端点来获取关于它的一般设置。我在我的 SPA 中需要这些，但不想每次需要它们时都提出请求。

这些在某种程度上是固定的，但可以更改 - 我在构建应用程序时不知道它们，所以我不能在我的 SPA 中静态编译它们。

  1. 我试过创建一个像这样的简单模块：
import {HTTP} from './http-common'

export default {
    config: null,

    getConfig() {
        return this.config
    },

    initConfig() {
        return HTTP.get('info')
            .then(r => {
                this.config = r.data
            })
    }
}

main.js然后，在创建 vue 实例之前，我在我的文件中执行了此操作：

import config from './config'
config.initConfig()
    .then(() => {
        Vue.prototype.$config = config.getConfig()
    })

问题是我没有一个很好的方法来了解我的组件是否已初始化配置，或者请求是否仍处于挂起状态或已成功加载。我可以检查一下this.$config === null，如果是的话，我需要把整个东西放在一个setTimeout左右，感觉有点hacky。

  1. 我还想在我需要的任何地方从上面包含我的配置模块，并在config.getConfig()每次需要该值时调用。

  2. Vuex 也可能是一个解决方案，但我的 SPA 非常简单（至少目前如此），我宁愿在不需要时避免 Vuex 的额外复杂性。

标签： javascriptvue.js

解决方案

我建议不要直接在 main.js 文件中执行此操作，而是在根组件中执行此操作。出于争论的原因，我们将其称为 App.vue

<template>
  <div
    v-if="appReady"
    id="app"
  >
    // Other template stuff here
  </div>
<script>
import {HTTP} from './http-common'
export default {
  name: 'App',
  data () {
    return {
      config: null
    }
  },
  computed: {
    appReady () {
      return !!this.config
    }
  },
  beforeCreate () {
    HTTP.get('info')
      .then(r => {
        this.config = r.data
      })
  }
}
</script>

然后只需this.$root.config在使用JS时调用或在模板中调用即可访问其他组件中的配置$root.config

推荐阅读