使用承诺呈现 Vue 应用程序，并等待用户输入

Question

使用承诺呈现 Vue 应用程序，并等待用户输入

den*_*dog 3 javascript frontend vue.js vuejs2

我有一个设计问题，我目前有一个逻辑繁重的 JS 脚本，我将其编写为各种承诺并创建了如下结构：

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

Run Code Online (Sandbox Code Playgroud)

现在loadVueApp()函数调用执行以下操作：

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

Run Code Online (Sandbox Code Playgroud)

它呈现我的 Vue 应用程序，然后用户可以与应用程序交互，转到各种屏幕，进行我存储在全局EventBus类型组件中的选择。

现在我的问题是，我应该如何将用户的选择传回我的承诺之塔？我应该这样做吗？

我可以loadVueApp根据出现的应用程序立即解决问题，然后对逻辑繁重的脚本进行函数调用 - 但这感觉不那么干净。

有任何想法吗？

提前致谢。

Answer 1

Dec*_*oon 5

这是一个简单的例子，它执行以下操作：

Vue 组件从模板实例化并附加到<body>元素，而不是从现有的 DOM 元素（以防您不希望 UI 最初可见）。
承诺仅在单击提交按钮时使用输入的文本进行解析。组件实例被销毁并从 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));

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

如果您使用的是单文件组件，您的代码结构将类似于：

输入界面.vue

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

<script>

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

</script>

Run Code Online (Sandbox Code Playgroud)

主文件

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，8 月前
查看次数：	8867 次
最近记录：	7 年，8 月前