Vue.js - Composition API - 切换按钮

Question

我正在开发一个 Vue.js 应用程序。 我决心了解 Composition API。 然而，语法让我有点失望。 我觉得我在闭包内创建闭包，这让我相信我做错了。 我正在尝试设置在我的组件加载时是否启用/禁用按钮。 为了演示，我创建了这个fiddle ，其中包括以下内容：

例子

myApp.component("banner", 
  { 
    template: '<button :disabled="isDisabled">generate</button>',
    setup(props) {
      let isDisabled = true;
      function initializeButton() {
        fetch('<some-url>')
          .then(res => { isDisabled = !res.ok; } )
        ;
      }
      initializeButton();
      
      return {
        isDisabled
      };
    }
  }
);

但是，这不起作用。 我已将范围缩小到在承诺的then部分中isDisabled不可“访问”这一事实。 但是，我不确定如何在then实际设置isDisabled 。 另外，我很想把initializeButton的外面setup方法，即使如此，我不能这样做，虽然。 我感谢任何可以帮助我的人的帮助。

谢谢你。

Answer 1

要使用异步设置方法，您需要使用suspense 。

@vue-composition / 如何在 setup() 中使用异步方法

例子 ：

 Vue.productionTip = false; const Todo = { async setup(props) { const todo = await fetch('https://jsonplaceholder.typicode.com/todos/1') .then(r => r.json()); return { todo } }, template: ` <div> Todo : {{ todo.title }} </div> ` }; const vm = Vue.createApp({ components: { Todo } }).mount('#app')

 <script src="https://unpkg.com/vue@next"></script> <div id="app"> <Suspense> <template #default> <Todo /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </div>

isDisabled是反应性的。 您需要使用ref使该变量具有反应性。

与 ref 反应的基本示例：

 Vue.productionTip = false; const vm = Vue.createApp({ setup(props) { const count = Vue.ref(0); const inc = () => { count.value += 1; } return { count, inc } } }).mount('#app')

 <script src="https://unpkg.com/vue@next"></script> <div id="app"> Count : {{ count }} <button @click="inc">+1</button> </div>

Answer 2

由于initializeButton是一个异步操作，你应该使用await语法（ https://javascript.info/async-await ）

async setup() {
  function async initializeButton() {
    return fetch('<some-url>').then(res => { isDisabled = !res.ok; } );
  }
  await initializeButton();
}