在组件加载之前初始化 Vue.prototype

Question

我的代码使用 Vuejs 中的插件功能来定义全局共享变量。

Vue.use(shared)

shared 定义为：-

export const shared = {
  config: getAppConfig()
}
shared.install = function() {
  Object.defineProperty(Vue.prototype, '$shared', {
    get() {
      return shared
    }
  })
}

function getAppConfig() {
  var api = getAPIURL()
  return axios.get("https://url/get_config")
  .then(response => {
    return response.data
  }
}

我的问题是，在我的组件中，如果我使用这个变量this.$shared.config，我会得到undefined。

查看控制台窗口和调试语句，我的组件代码在插件有时间到this.$shared.config之前执行。

我是 javascript+Vuejs 的新手，但是当我研究这个错误时，它与 axios 异步有关，所以我决定返回 promise 并使用 await。

function getAppConfig() {
  var api = getAPIURL()
  return axios.get("https://url/get_config")
}

但是，在我的 shared.install 函数中，我尝试这样做：-

shared.install = function() {
  let config = await shared.config

我收到错误：Syntax Error: await is a reserved word。

由于我是新手，我在如何使这段代码同步方面似乎犯了一个基本错误。解决此问题的正确方法是什么？

Answer 1

Vue 并不特别支持异步初始化的插件。

如果组件将在Vue.use(shared) 之后立即实例化，则$shared 将不可用。应该存在可以链接的承诺，例如：

install() {
  Vue.sharedPromise = getAppConfig();
  Vue.sharedPromise.then(config => {
    Vue.prototype.$shared = config
  });
}

和

Vue.use(shared);
Vue.sharedPromise.then(() => {
  // $shared is available, mount app
});

由于没有必要将异步操作推送到插件，因此可以将其保留在外部：

install(Vue, { config }) {
  Vue.prototype.$shared = config;
}

和

getAppConfig().then(config => {
  Vue.use(shared, { config });
  // $shared is available, mount app
});