Zenn
📚

Vue3.js(Tauri vue3 vuetity) から始めるディスクトップアプリ＃2 [Rust関数をVue３から使う]

2022/11/27に公開
Rust
TypeScript
Vue 3
Vite
Tauri
tech

はじめに

Tauri を使用すると、ネイティブ機能をフロントエンドから操作できます。これをCommandsと呼びます。フロントエンド（vite + vue3) からRust関数を呼び出すことができます。
負荷の高い処理や OS への呼び出しをする際に利用します。

簡単な例を実装してみよう

サンプルのコードを参考に実装してみます。
https://tauri.app/v1/guides/getting-started/setup/vite#invoke-commands
下記のコードを追記します。
greet を呼ぶと、’Hello,パラメータ!’　と加工して返却する関数です。

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

#[tauri::command]：関数が JavaScript コンテキストと通信できるようにする属性マクロ
fn greet(name: &str)：普通の関数

次に　.invoke_handler(tauri::generate_handler![greet])　を追記します。
この記述で、フロント側からアクセスできます。

src-tauri/src/main.rs
fn main() {
  tauri::Builder::default()
+   .invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

結果下記のようになります。

src-tauri/src/main.rs
#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

fn main() {
  tauri::Builder::default()
  　.invoke_handler(tauri::generate_handler![greet])
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

#[tauri::command]
fn greet(name: &str) -> String {
   format!("Hello, {}!", name)
}

使えるようにライブラリを追加する

新しく作成したコマンドを呼び出すには、@tauri-apps/apiJavaScript ライブラリを使用します。
便利な JavaScript 抽象化を通じて、ウィンドウ、ファイルシステムなどのコア機能へのアクセスが提供されます。

$ yarn add @tauri-apps/api
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @tauri-apps/api@1.2.0
info All dependencies
└─ @tauri-apps/api@1.2.0
Done in 1.30s.

フロントエンド

下記のように、書き換えます。
シンプルにしましたので、わかりやすいと思いますが、
import { invoke } from '@tauri-apps/api'　と　invoke('greet',{name: "World"})　が大事です。

app.ts
<template>
  <div class="divInput" style="max-width: 400px">
  <label >{{ textMsg }}</label>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { invoke } from '@tauri-apps/api'

//Dataオブジェクト
export type DataType = {
  text: string;
};
export default defineComponent({
  name: 'App',
  components: {},
  data(): DataType {
    return {
      //nameの初期化
      text: '',
    };
  },
  computed: {
    textMsg(){        
      
        .then((response) => { if (typeof response === 'string'){
                                this.text = response;
                              }else{
                                this.text =  'Error';
                              }
        })
          return this.text;
        },
  },
  methods: {
  },
  watch: {},
});
</script>
<style scoped>
</style>

結果

お疲れさまでした。

Discussion