Добавить CloudKit JS в Vue Project

Question

Я пытаюсь добавить CloudKit JS в новый проект Vue. В идеале я мог бы получить доступ к функциям CloudKit из любого компонента в моем приложении. Я новичок в Vue, поэтому, пожалуйста, будьте осторожны со мной.:)

До сих пор я пытался поместить следующее в main.js:

var fetch = require('node-fetch')
var CloudKit = require("./cloudkit.js")

CloudKit.configure({
  services: {
    fetch: fetch
  },
  containers: [{
    containerIdentifier: '...',
    apiToken: '...',
    environment: 'development'
  }]
})

Это дает мне ошибку скрипта в cloudkit.js:

TypeError: Невозможно прочитать свойство 'ArrayBuffer' из неопределенного

Итак, я прочитал этот пост и попробовал это в App.vue:

export default {
  name: 'App',
  components: {
    'master': Master
  },
  mounted() {
    let CloudKit = document.createElement('script')
    CloudKit.setAttribute('src', 'https://cdn.apple-cloudkit.com/ck/2/cloudkit.js')
    document.head.appendChild(CloudKit)
  }
}

Затем я могу настроить CloudKit и использовать его внутри App.vue, но мне неясно, как сделать CloudKit доступным во всех моих компонентах, не переопределяя его, как я делал в mounted() функция выше.

Как я могу импортировать CloudKit и сделать его доступным в моем приложении Vue по всему миру?

Answer 1

Возможно, я слишком упрощаю, но я попытался добавить:

<script src="https://cdn.apple-cloudkit.com/ck/2/cloudkit.js"></script>

... к index.html файл в моем проекте Vue, и, кажется, отлично работает. CloudKit Объект доступен во всех моих компонентах. ¯\_(ツ)_/¯

Answer 2

Вы также можете добавить новое глобальное свойство в vue:

Импортируйте CloudKit, как вы это сделали, затем добавьте это в ваш main.js: Vue.prototype.$CloudKit = CloudKit

Теперь Cloudkit доступен в вашем проекте с this.$CloudKit

Больше информации здесь

PS: вы можете настроить cloudkit в mounted в приложении