Vue 3响应性系统与Web API（如`Payment Request API`）的集成：将其状态纳入依赖追踪 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3响应性系统与Web API集成：Payment Request API为例

大家好！今天我们要探讨一个非常有意思的话题：如何将Vue 3的响应式系统与Web API集成，并以Payment Request API为例，深入了解如何将API的状态纳入Vue 3的依赖追踪。

1. Vue 3 响应式系统回顾

在深入集成之前，我们先简单回顾一下Vue 3响应式系统的核心概念。Vue 3 使用 Proxy 实现响应式，其核心在于以下几点：

Proxy: Vue 3 使用 Proxy 对象来拦截对数据的读取和写入操作。
track: 当读取响应式数据时，Vue 3 会记录（track）当前活动的 effect (例如组件的渲染函数) 对该数据的依赖。
trigger: 当修改响应式数据时，Vue 3 会触发（trigger）所有依赖于该数据的 effect 重新执行。

最基础的例子如下：

import { reactive, effect } from 'vue';

const state = reactive({
  count: 0
});

effect(() => {
  console.log('Count is:', state.count);
});

state.count++; // 输出: Count is: 1
state.count++; // 输出: Count is: 2

在这个例子中，reactive 函数将普通对象 state 转换为响应式对象。effect 函数创建了一个副作用，它会在 state.count 发生变化时重新执行。当 state.count++ 执行时，Vue 3 内部会检测到 state.count 被修改，并触发所有依赖它的 effect，从而更新控制台输出。

2. Payment Request API 简介

Payment Request API 允许网页直接与用户的支付方式（例如信用卡、银行账户）进行交互，而无需依赖第三方支付网关的复杂集成。它提供了一种标准化的方式来处理支付请求，提升用户体验和安全性。

一个简单的Payment Request API 使用例子如下：

const supportedInstruments = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }
];

const details = {
  total: {
    label: 'Total',
    amount: { currency: 'USD', value: '10.00' }
  }
};

const options = {};

const request = new PaymentRequest(supportedInstruments, details, options);

request.show()
  .then(paymentResponse => {
    // 处理支付成功
    console.log('Payment successful!', paymentResponse);
    paymentResponse.complete('success');
  })
  .catch(error => {
    // 处理支付失败
    console.error('Payment failed:', error);
  });

这段代码创建了一个支付请求，指定了支持的支付方式（basic-card，即信用卡）和总金额。request.show() 方法会显示支付界面，用户可以选择支付方式并完成支付。如果支付成功，then 回调会被调用；如果支付失败，catch 回调会被调用。paymentResponse.complete('success') 通知浏览器支付已成功处理。

3. 集成挑战：异步和状态管理

将Payment Request API集成到Vue 3应用中，主要挑战在于：

异步性: Payment Request API 的核心操作（例如 request.show()）是异步的，依赖于 Promise。
状态管理: 我们需要管理支付请求的状态（例如：是否显示支付界面、支付是否成功、错误信息），并将这些状态与 Vue 组件关联起来，以便在UI中展示。

直接将Promise的结果赋值给Vue的响应式变量可能会导致问题，因为我们需要在Promise resolve/reject之后更新状态。如果直接赋值，Vue可能无法正确追踪这些状态的变化。

4. 解决方案：响应式包装器

为了解决上述挑战，我们可以创建一个响应式包装器（Reactive Wrapper）来封装 Payment Request API 的状态。这个包装器将维护API的状态，并使用 Vue 3 的响应式系统来追踪这些状态的变化。

下面是一个 PaymentRequestWrapper 的示例：

import { reactive, ref } from 'vue';

class PaymentRequestWrapper {
  constructor(supportedInstruments, details, options) {
    this.supportedInstruments = supportedInstruments;
    this.details = details;
    this.options = options;

    this.request = null; // PaymentRequest 实例
    this.state = reactive({
      isShowing: false,
      isComplete: false,
      error: null,
      paymentResponse: null,
    });
  }

  async show() {
    this.state.isShowing = true; // 标记为显示中
    this.state.error = null; // 清空之前的错误

    try {
      this.request = new PaymentRequest(this.supportedInstruments, this.details, this.options);
      const paymentResponse = await this.request.show();

      this.state.paymentResponse = paymentResponse;
      this.state.isComplete = true;

      try {
        await paymentResponse.complete('success');
      } catch (completeError) {
        this.state.error = completeError;
        console.error("Error completing payment:", completeError);
        paymentResponse.complete('fail');
      }
    } catch (error) {
      this.state.error = error;
      console.error('Payment failed:', error);
    } finally {
      this.state.isShowing = false; // 标记为完成
    }
  }

  abort() {
    if (this.request) {
      this.request.abort();
      this.state.isShowing = false;
    }
  }
}

export default PaymentRequestWrapper;

这个 PaymentRequestWrapper 类做了以下几件事：

构造函数: 接收 PaymentRequest 的参数（supportedInstruments、details、options），并初始化 state 对象。state 对象包含 isShowing（是否显示支付界面）、isComplete（支付是否完成）、error（错误信息）和 paymentResponse（支付响应对象）等状态。 state对象使用 reactive 函数包装，使其成为响应式对象。
show() 方法: 创建 PaymentRequest 实例，调用 request.show() 显示支付界面，并更新 state 对象的状态。使用 try...catch...finally 块来处理异步操作的成功、失败和完成情况，确保状态的正确更新。 paymentResponse.complete('success') 通知浏览器支付已成功处理。
abort() 方法: 允许取消支付请求，并将 isShowing 设置为 false。

5. 在 Vue 组件中使用包装器

现在，我们可以在 Vue 组件中使用 PaymentRequestWrapper：

<template>
  <div>
    <button @click="startPayment" :disabled="payment.state.isShowing">
      {{ payment.state.isShowing ? '支付中...' : '开始支付' }}
    </button>
    <div v-if="payment.state.error">
      支付失败: {{ payment.state.error }}
    </div>
    <div v-if="payment.state.isComplete">
      支付成功!
    </div>
  </div>
</template>

<script>
import { reactive } from 'vue';
import PaymentRequestWrapper from './PaymentRequestWrapper';

export default {
  setup() {
    const supportedInstruments = [
      {
        supportedMethods: ['basic-card'],
        data: {
          supportedNetworks: ['visa', 'mastercard']
        }
      }
    ];

    const details = {
      total: {
        label: 'Total',
        amount: { currency: 'USD', value: '20.00' }
      }
    };

    const options = {};

    const payment = reactive(new PaymentRequestWrapper(supportedInstruments, details, options));

    const startPayment = () => {
      payment.show();
    };

    return {
      payment,
      startPayment
    };
  }
};
</script>

在这个 Vue 组件中：

我们使用 setup 函数来创建 PaymentRequestWrapper 实例，并将其包装在 reactive 函数中，使其成为响应式对象。
startPayment 方法调用 payment.show() 启动支付流程。
模板中使用 v-if 指令来根据 payment.state 的状态显示不同的信息。 payment.state.isShowing 用于禁用支付按钮，防止重复点击。
payment 对象在 setup 函数中返回，以便在模板中使用。

6. 深入探讨：依赖追踪的原理

Vue 3 的响应式系统能够追踪 payment.state 的变化，是因为我们在读取 payment.state.isShowing、payment.state.error 和 payment.state.isComplete 等属性时，Vue 3 会记录当前组件的渲染函数对这些属性的依赖。

当 PaymentRequestWrapper 的 show() 方法更新 this.state 的属性时，Vue 3 会检测到这些变化，并触发所有依赖这些属性的组件重新渲染，从而更新UI。

7. 优化和扩展

更细粒度的状态: 可以根据实际需求，将状态细化到更小的粒度，例如添加 isLoading（正在加载）、isAborted（已取消）等状态。
自定义事件: 可以使用自定义事件来通知组件支付流程中的特定事件，例如 payment-started、payment-success、payment-failed。
组合式函数: 可以将 PaymentRequestWrapper 的逻辑封装到组合式函数中，以便在多个组件中复用。
错误处理: 更完善的错误处理机制，例如根据不同的错误类型显示不同的错误信息，或者重试支付。

8. 高级用法：与Pinia集成

如果你的项目使用了Pinia作为状态管理工具，可以将Payment Request API的状态集成到Pinia store中。

首先，创建一个Pinia store：

import { defineStore } from 'pinia';
import PaymentRequestWrapper from './PaymentRequestWrapper';

export const usePaymentStore = defineStore('payment', {
  state: () => ({
    payment: null,
    isShowing: false,
    isComplete: false,
    error: null,
    paymentResponse: null,
  }),
  actions: {
    async initializePayment(supportedInstruments, details, options) {
      this.payment = new PaymentRequestWrapper(supportedInstruments, details, options);
    },
    async showPayment() {
      if (!this.payment) {
        console.error("Payment not initialized.");
        return;
      }
      this.isShowing = true;
      this.error = null;

      try {
        const paymentResponse = await this.payment.request.show(); // 调用PaymentRequestWrapper的show方法

        this.paymentResponse = paymentResponse;
        this.isComplete = true;

        try {
          await paymentResponse.complete('success');
        } catch (completeError) {
          this.error = completeError;
          console.error("Error completing payment:", completeError);
          paymentResponse.complete('fail');
        }
      } catch (error) {
        this.error = error;
        console.error('Payment failed:', error);
      } finally {
        this.isShowing = false;
      }
    },
    abortPayment() {
      if (this.payment) {
        this.payment.abort();
        this.isShowing = false;
      }
    },
  },
});

然后，在Vue组件中使用这个store：

<template>
  <div>
    <button @click="startPayment" :disabled="paymentStore.isShowing">
      {{ paymentStore.isShowing ? '支付中...' : '开始支付' }}
    </button>
    <div v-if="paymentStore.error">
      支付失败: {{ paymentStore.error }}
    </div>
    <div v-if="paymentStore.isComplete">
      支付成功!
    </div>
  </div>
</template>

<script>
import { usePaymentStore } from './stores/payment';
import { onMounted } from 'vue';

export default {
  setup() {
    const paymentStore = usePaymentStore();

    onMounted(() => {
      const supportedInstruments = [
        {
          supportedMethods: ['basic-card'],
          data: {
            supportedNetworks: ['visa', 'mastercard']
          }
        }
      ];

      const details = {
        total: {
          label: 'Total',
          amount: { currency: 'USD', value: '20.00' }
        }
      };

      const options = {};

      paymentStore.initializePayment(supportedInstruments, details, options);
    });

    const startPayment = () => {
      paymentStore.showPayment();
    };

    return {
      paymentStore,
      startPayment
    };
  }
};
</script>

这种方式将状态管理集中在Pinia store中，更易于维护和测试。

9. 注意事项与最佳实践

在将Web API与Vue 3响应式系统集成时，需要注意以下几点：

避免直接修改API返回的对象: Web API返回的对象可能不是响应式的，直接修改它们可能不会触发Vue 3的更新。应该将API返回的数据复制到响应式对象中。
处理异步操作: 使用 async/await 或 Promise 来处理异步操作，并在操作完成后更新响应式状态。
错误处理: 提供适当的错误处理机制，以便在API调用失败时通知用户。
性能优化: 避免过度更新状态，只在必要时才更新。

10. 表格总结

特性	描述
Proxy	Vue 3 使用 `Proxy` 对象来拦截对数据的读取和写入操作，是响应式系统的核心。
track	当读取响应式数据时，Vue 3 会记录当前活动的 effect 对该数据的依赖。
trigger	当修改响应式数据时，Vue 3 会触发所有依赖于该数据的 effect 重新执行。
PaymentRequest API	允许网页直接与用户的支付方式进行交互，提供标准化的支付请求处理方式。
Reactive Wrapper	用于封装 `Payment Request API` 的状态，并使用 Vue 3 的响应式系统来追踪这些状态的变化。包含 `isShowing`、`isComplete`、`error` 和 `paymentResponse` 等状态。
Pinia 集成	将 Payment Request API 的状态集成到 Pinia store 中，集中管理状态，更易于维护和测试。
异步操作处理	使用 `async/await` 或 Promise 来处理异步操作，并在操作完成后更新响应式状态。
错误处理	提供适当的错误处理机制，以便在 API 调用失败时通知用户。

集成Web API状态到响应式系统，需要仔细考虑

通过创建响应式包装器和使用 Vue 3 的响应式系统，我们可以将 Web API（例如 Payment Request API）的状态无缝集成到 Vue 3 应用中。这种方法不仅可以简化状态管理，还可以提高用户体验和应用的可维护性。当然，不同的Web API需要不同的集成方法，需要根据实际情况进行调整。

更多IT精英技术系列讲座，到智猿学院