在离子模板中显示来自异步函数的变量答案

【问题标题】：Display variable from async function in Ionic Template在离子模板中显示来自异步函数的变量
【发布时间】：2021-05-09 17:51:54
【问题描述】：

我正在尝试在 Vue/Ionic 模板中显示 async 方法的结果。我成功地从本地存储中检索到值并使用console.log输出它

 setup() {

 import {Plugins} from "@capacitor/core";
 const {Storage}=Plugins;

 const getEmail= async()=>{
          const emailv=await Storage.get({key: "email"});
          console.log(emailv.value);
          return emailv.value;
    };


 }

我也试过了

 setup() {

  import {Plugins} from "@capacitor/core";
  const {Storage}=Plugins;

   const emailv= async()=>{
          const {value}=await Storage.get({key: "email"});
          console.log(value);
          return value;
    };
}

这就是我在模板上的称呼：

<ion-note>{{emailv()}}</ion-note>

问题在于，虽然它已成功显示在控制台上，但它似乎不适用于模板。它只是告诉我"[object Promise]"。我已经尝试寻找一些解决方案，并且根据我的理解（如果我错了，请纠正我，因为我不确定 async-await 是如何工作的。），一旦我检索到变量，我应该能够在任何地方使用它.

所以我的问题是：

我有什么方法可以“获取”这个变量并将其显示在模板中？

【问题讨论】：

请分享包含此功能的整个代码
谢谢。我会更新我的问题，但实际上没有什么可显示的。我正在使用进口。它有效，只是无法正确显示值。
你在设置挂钩中使用这个吗？
是的。我在设置挂钩中使用它。

标签： vue.js ionic-framework async-await vue-component vuejs3

【解决方案1】：

你应该在挂载的钩子中调用那个函数，然后在你的模板中使用emailv：

import {ref,onMounted} from 'vue';
 import {Plugins} from "@capacitor/core";
 const {Storage}=Plugin

export default{

setup(props){
  const emailv=ref('')

  onMounted( async ()=>{
     const {value}=await Storage.get({key: "email"});

     emailv.value=value;
   })

  return{
   emailv
  }
}
}

模板：

<ion-note>{{emailv}}</ion-note>

【讨论】：

120:5 error 'onMounted' is not defined no-undef
你添加import {ref,onMounted} from 'vue';了吗？
我刚做了，谢谢。它 console.logs 值但不在模板上显示任何内容。现在它什么也没显示。
你能在emailv.value=value;之后分享console.log(emailv.value);的输出吗
onMounted( ()=>{ Storage.get({key: "email"}).then(res=> emailv.value=res.value;}) }) 呢？

【解决方案2】：

你可以试试这个吗？将您的设置异步并在您的 const 中等待结果：

async setup() {
  const emailv = await getResults()

  function getResults() {
    return Storage.get({key: "email"})
  }
}

【讨论】：