Инициализируйте 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, но когда я исследовал эта ошибка связана с асинхронностью топора ios, поэтому я решил вернуть обещание и использовать ожидание.

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

Поскольку нет реальной необходимости использовать * sh асинхронную операцию для плагина, это может быть хранится снаружи:

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

и

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