Javascript Vue.js-合成API-切换按钮

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

示例

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

myApp.component（“横幅”，
{ 
模板：“生成”，
设置（道具）{
让isDisabled=true；
函数初始化按钮（）{
提取（“”）
。然后（res=>{isDisabled=！res.ok；}）
;
}
初始化按钮（）；
返回{
禁用
};
}
}
);

然而，这是行不通的。我已经把它缩小到一个事实，即

isDisabled

在承诺的

then

部分中是不“可访问的”。但是，我不确定如何在

然后
中实际设置
isDisabled
。另外，我想把
初始化按钮
放在
设置
方法之外，即使这样，我也做不到。我感谢任何能帮助我的人

谢谢。
因为
初始化按钮是一个异步操作，所以您应该使用
等待
语法（）

异步设置（）{
函数异步初始化按钮（）{
返回fetch（“”）.then（res=>{isDisabled=！res.ok；}）；
}
等待初始化按钮（）；
}
要使用异步设置方法


例如：


Vue.productionTip=false；
常数Todo={
异步设置（props）{
const todo=等待取数（'https://jsonplaceholder.typicode.com/todos/1')
.then（r=>r.json（））；
返回{
待办事项
}
},
模板：`
Todo:{{Todo.title}}
`
};
const vm=Vue.createApp({
组成部分：{
待办事项
}
}).mount（“#应用程序”）

加载。。。
使用箭头函数捕获当前上下文
const initializeButton=（）=>{…}
@Pierre感谢您的回复。然而，这不起作用。使用箭头功能，
此
是
未定义的
。如果我做了
console.log（这个）在回调内部，我看到
未定义
<代码>控制台.log（isDisabled）根据需要打印
true
。但是，即使我手动输入
isDisabled=false在回调中，按钮状态不变。值得注意的是，如果我在
fetch
调用之外手动将
isDisabled
设置为
false
，按钮将根据需要启用。因此，我知道a）模板中的数据绑定是正确的。b） 我没有在
fetch
中正确设置它。我错过了什么？