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