Vue 3

开始前，请先按照 JavaScript 接入指南加载 SDK 并创建公共客户端模块。本页只说明 Vue 3 特有的初始化与调用方式。

接入步骤

在项目根目录的 index.html 中加载 SDK，然后在应用入口预加载：

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { preloadGeeGuard } from './geeGuardClient';

preloadGeeGuard().catch(function (error) {
  console.error('GeeLabGuard 初始化失败:', error);
});

createApp(App).mount('#app');

业务组件示例：

<script setup>
import { ref } from 'vue';
import { getGeeToken } from './geeGuardClient';

const props = defineProps({ orderId: { type: String, required: true } });
const submitting = ref(false);
const error = ref('');

async function handleCheckout() {
  submitting.value = true;
  error.value = '';
  try {
    const { token, offline } = await getGeeToken();
    await fetch('/api/checkout', {
      method: 'POST',
      headers: { 'content-type': 'application/json' },
      body: JSON.stringify({
        orderId: props.orderId,
        gee_token: token,
        offline,
      }),
    });
  } catch (err) {
    error.value = err instanceof Error ? err.message : '请求处理失败';
  } finally {
    submitting.value = false;
  }
}
</script>

<template>
  <button type="button" :disabled="submitting" @click="handleCheckout">
    {{ submitting ? '处理中…' : '提交订单' }}
  </button>
  <p v-if="error" role="alert">{{ error }}</p>
</template>

请勿在每个组件的 onMounted() 中分别初始化 SDK。多个页面应共用客户端模块。

Vue 3

接入步骤

On this page