如何在 tauri 和 yew 前端之间传递对象答案

【问题标题】：How to pass objects between tauri and yew front-end如何在 tauri 和 yew 前端之间传递对象
【发布时间】：2023-02-05 09:53:06
【问题描述】：

Tauri 文档说命令处理程序的返回值可以是任何类型，只要它实现了 serde::Serialize。

作为默认 tauri + yew 示例项目的一个非常基本的修改，我在我的 tauri 应用程序中修改了一个简单的 String 返回类型，其结构如下：

#[derive(Serialize, Deserialize)]
struct Data {
    demo: String
}

这样命令就变成了

#[tauri::command]
fn greet(name: &str) -> Data {
    Data{demo: "demo".to_owned()}
}

不幸的是，红豆杉前端现在似乎返回 None，而在 msg 成功转换为 String 之前：

 new_msg = invoke(
    "greet",
    to_value(&GreetArgs { name: &*name }).unwrap(),
 )
 .await;
 log(&new_msg.as_string().unwrap());

【问题讨论】：

什么是invoke()？它是如何定义的？据我所知，使用 Yew+WASM 中的 Tauri 需要一些 Javascript“胶水”代码，它在哪里？你能提供一个minimal reproducible example吗？

标签： rust tauri

【解决方案1】：

它还是真实的吗？

我正在使用 Tauri + Vue + TS 开发我的应用程序，我想我知道你的代码中存在什么样的问题。

首先，您需要在“@tauri-apps/api”包的前端使用调用（对于 Vue）。其次，您需要传递包含成对（键，值）的对象。

让我们来看看在职的我的代码中的示例：

后端

#[tauri::command]
#[allow(non_snake_case)]
pub async fn getPackage<'s>(packages: StatePackageIndex<'s>, id: &str) -> Result<SerdeDedutyPackage, String> {
    let package_id = id.to_string();

    for service in packages.read().await.services_ref().values() {
        if let Some(agent) =
            service.get(&package_id).await.map_err(|error| format!("Internal error: {error}"))? {
                return SerdeDedutyPackage::try_from(
                        agent
                            .read()
                            .await
                            .package_ref()
                            .to_result()
                            .map_err(|error| format!("Internal error: {error}"))?)
                    .await
                    .map_err(|error| format!("Internal error: While serialize package object: {error}"));
        }
    }

    Err(format!("Internal error: Package with uuid '{id}' not found"))
}

在前端某处

async function refresh(totally = false) {
    if (totally)
      packages.value = []

    const updated: Set<string> = new Set(await invoke('listPackages'))

    for (const uuid of updated) {
      try {
        const serialized: IDedutyPackage = await invoke('getPackage', { id: uuid })
        if (!serialized)
          continue

        packages.value.push(DedutyPackage.fromOptions(serialized))
      }
      catch (error) {
        console.error(`Internal error: Unable to fetch Package '${uuid}' due to: ${error}`)
      }
    }
  }

因此，更具体地说，您的前端函数必须是异步的（或返回承诺）并执行下一步：

// Use JS highlight because I don't worked with Yew
const data = await invoke('greet', { name: 'grmmgrmm'})

invoke('greet', { name: 'grmmgrmm'})
  .then((data /* : Data */) => {
     console.log('Data is', data)
  })

更多信息可以在这里找到：Create a desktop app in Rust using Tauri and Yew

【讨论】：