tauri和vue通信的问题解决方案示例详解

 更新时间:2023年10月18日 09:17:48   作者:o_ra  
这篇文章主要为大家介绍了tauri和vue通信的问题解决方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

vue在前端调用rust里的函数

之前用bery写了个ui发现cpu占用挺高的 就试着用tauri写一下发现性能还挺好的,记录日志时候刷新几万条也不卡

前端使用的是vue在前端调用rust里的函数可以在methods里面添加

async increment() {
      let a = await invoke("set_filter",  {"filter":"filter_str"} );
    },

在rust里面添加

#[tauri::command]
fn set_filter(_window: tauri::Window, filter: &str) -> bool{
    return true;
}

在rust中通知vue需要发消息

在vue中先监听消息可以在mounted中调用

async mounted(){
      this.unlisten = listen('udp_log', this.handleEventRecv);
  },

注销时候调用一下listen返回的值就行了

unmounted(){
    this.unlisten.then(F=>F());
  }

在rust中发消息时候有可能是在单独一个线程里发的可以使用

后台进程使用

lazy_static!{
    static ref G_UDP_SER: Mutex<UdpNetworkPlugin> = Mutex::new(UdpNetworkPlugin::new());
}

创建一个全局变量,先不启动后台进程 ,启动后台进程等app启动获取到可以发消息的句柄再启动,启动app可以使用

fn main() {
    let app = tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![greet, set_filter, get_new_log])
        .build(tauri::generate_context!())
        .expect("init app err");
        //.run(tauri::generate_context!())
        //.expect("error while running tauri application");
    //start_timer(win_app);
    {
        let win_app = app.get_window("main").unwrap();
        let mut udp_ser = G_UDP_SER.lock().unwrap();
        udp_ser.start_thread(win_app);
    }

    app.run(|_,_| {});
}

先构造一个app 先不run 就能用app获取到发消息的句柄

发消息使用

win.emit("udp_log", text.to_string());

这个只有这个win move到后台线程

以上就是tauri和vue通信的问题解决方案示例详解的详细内容,更多关于tauri vue通信的资料请关注脚本之家其它相关文章!

相关文章

  • 利用WebStorm创建一个Vue项目的完整步骤

    利用WebStorm创建一个Vue项目的完整步骤

    WebStorm是一个非常适合学习和开发Vue项目的集成开发环境,下面这篇文章主要给大家介绍了关于利用WebStorm创建一个Vue项目的完整步骤,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-06-06
  • vue中v-show和v-if的异同及v-show用法

    vue中v-show和v-if的异同及v-show用法

    这篇文章主要介绍了vue中v-show和v-if的异同 ,通过代码详解v-show用法,本文给大家介绍的非常详细具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue中cookies的使用方式

    vue中cookies的使用方式

    这篇文章主要介绍了vue中cookies的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • 浅析Vue.js中v-bind v-model的使用和区别

    浅析Vue.js中v-bind v-model的使用和区别

    v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定。这篇文章主要介绍了Vue.js中v-bind v-model的使用和区别,需要的朋友可以参考下
    2018-12-12
  • vue中el-autocomplete与el-select的异同

    vue中el-autocomplete与el-select的异同

    本文主要介绍了vue中el-autocomplete与el-select的异同,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • 八个一看就觉得很棒的Vue开发技巧分享

    八个一看就觉得很棒的Vue开发技巧分享

    在用Vue开发的这几年里,我学到了很多有用的技巧,所以这篇文章主要给大家分享介绍了八个一看就觉得很棒的Vue开发技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue 3.0 v-for中的Ref数组用法小结

    Vue 3.0 v-for中的Ref数组用法小结

    在 Vue 2 中,在 v-for 里使用的 ref attribute会用ref 数组填充相应的 $refs property,本文给大家介绍Vue 3.0 v-for中的Ref数组的相关知识,感兴趣的朋友一起看看吧
    2023-12-12
  • vue2和vue3实现图片懒加载方式

    vue2和vue3实现图片懒加载方式

    这篇文章主要介绍了vue2和vue3实现图片懒加载方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 详解vue-cli 3.0 build包太大导致首屏过长的解决方案

    详解vue-cli 3.0 build包太大导致首屏过长的解决方案

    这篇文章主要介绍了详解vue-cli 3.0 build包太大导致首屏过长的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue父子组件方法this.$emit()有时候不触发问题及解决

    Vue父子组件方法this.$emit()有时候不触发问题及解决

    这篇文章主要介绍了Vue父子组件方法this.$emit()有时候不触发问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-05-05

最新评论