Визуализация приложения Vue с использованием обещания и ожидание ввода пользователя - PullRequest
Новая
       3

Визуализация приложения Vue с использованием обещания и ожидание ввода пользователя

0 голосов
/ 12 мая 2018

У меня есть вопрос разработки, у меня в настоящее время есть тяжелый JS-скрипт, который я написал как различные обещания и создал структуру, как показано ниже: 

init()
    .then(result => doSomethingA(result)) 
    .then(result => doSomethingB(result))
    .then(result => loadVueApp(result))

Теперь вызовы функции loadVueApp()следующее: 

new Vue({
  el : '#app',
  render : h => h(App)
});

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

Теперь мой вопрос: как мне передать выбор пользователей обратно в мою башню обещаний?Должен ли я делать это вообще?

Я мог бы разрешить loadVueApp сразу, основываясь на простом появлении приложения, а затем сделать обратный вызов функции для тяжелого логического скрипта - но это не кажется чистым.

Есть идеи?

Заранее спасибо.

1 Ответ

0 голосов
/ 12 мая 2018

Вот простой пример, который выполняет следующее:

  • Компонент Vue создается из шаблона и добавляется к элементу <body>, а не из существующего элемента DOM (в случае, если вы не используетене хочу, чтобы пользовательский интерфейс был изначально видимым).
  • Обещание разрешается только с введенным текстом при нажатии кнопки отправки.Экземпляр компонента уничтожается и удаляется из DOM. 

const InputUI = {
  template: '#input-ui',
  data() {
    return {
      value: '',
    };
  },
};

function getInput() {
  return new Promise(resolve => {
    const inputUI = new Vue(InputUI);
    
    inputUI.$once('submit', value => {
      inputUI.$destroy();
      inputUI.$el.remove();
      resolve(value);
    });
    
    inputUI.$mount();
    document.body.appendChild(inputUI.$el);
  });
}

getInput().then(value => alert(value));
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<template id="input-ui">
  <div>
    <input v-model="value">
    <button @click="$emit('submit', value)">Submit</button>
  </div>
</template>

Если вы используете отдельные файловые компоненты, ваш код будет структурирован следующим образом:

InputUI.vue 

<template>
  <div>
    <input v-model="value">
    <button @click="$emit('submit', value)">Submit</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      value: '',
    };
  },
};

</script>

main.js 

import Vue from 'vue';
import InputUI from './InputUI.vue';

function getInput() {
  return new Promise(resolve => {
    const InputUIVue = Vue.extend(InputUI);
    const inputUI = new InputUIVue();

    inputUI.$once('submit', value => {
      inputUI.$destroy();
      inputUI.$el.remove();
      resolve(value);
    });

    inputUI.$mount();
    document.body.appendChild(inputUI.$el);
  });
}

getInput().then(value => alert(value));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...