Блог

Я создаю приложение без кода, используя Vue. У меня есть идея, что у меня есть некоторый файл JSON и импортировать его во время выполнения. Однако файл JSON не позволяет добавлять функцию. Я перехожу на использование файла javascript или typescript для хранения объекта JSON, как показано ниже.

 export {
  "is": "button",
  "props": {
    "type": "button"
  },
  "events": {
    "click": () => {
      // do something
    }
  }
}
  

В настоящее время я хочу запустить импорт, когда Vue создаст компонент.

 {
  created () {
    // import here
  }
}
  

У меня есть два метода, которые я пробовал:

1. Добавьте тег script, но сначала мне нужно что-то для его сохранения, например window
2. используйте import, но он поддерживает только локальный файл.

Я храню эти файлы в бэкэнде и загружаю каждый из них, когда это нужно интерфейсу. Есть ли какое-либо лучшее решение? Пожалуйста, помогите и спасибо вам.

Похоже, вы, по сути, хотите сделать что-то вроде отложенной загрузки модуля, если вы используете Webpack, вы можете захотеть взглянуть на это:https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting /

Я не уверен, что могу рекомендовать подход, который вы используете, но если вы хотите придерживаться его, ваше решение, вероятно, будет выглядеть примерно так:

1. Сделайте HTTP-запрос get на URL вашего файла. Это должен быть обычный текстовый ответ, а не JSON. Сам файл может быть .js файлом, содержащим объектный литерал ( { a: ..., b: ..., c: ... } ) с определениями функций.
2. Как только вы получите текст, оцените его с помощью eval(...the response) и сохраните в локальной переменной, которую затем сможете использовать. Обратите внимание, что если код в вашем файле имеет какие-либо зависимости, вам придется придумать какой-то способ перенести и их.

Однако очевидно, что это доставляет много хлопот и, вероятно, того не стоит. Разделение кода в целом стоит усилий, только если это довольно большое приложение; для небольших приложений стоимость обходов перевешивает стоимость загрузки начального пакета.

В любом случае, вам, вероятно, повезет больше при использовании встроенной системы динамического импорта Vue, чем готового решения, но на самом деле это просто зависит от того, чего вы пытаетесь достичь здесь.