數據轉換 - daniel-qa/Vue GitHub Wiki

數據轉換

字串 Map

msgType: msgTypeMap[item.msgType]

const msgTypeMap = {
    notify: '端外',
    sms: '簡訊',
    mail: 'mail',
}

adapter pattern

适配器模式（Adapter Pattern）

适配器模式（Adapter Pattern）是一种结构型设计模式，用于在两个接口不兼容的类之间建立桥梁，使它们能够协同工作，而无需更改其原始代码。

在 Vue 3 中，适配器模式的应用通常出现在数据转换、API 兼容性处理或组件封装上。以下是一个使用适配器模式的 Vue 3 示例。

🎯 场景

假设我们有一个旧的 API 返回的数据格式如下：

{
  "full_name": "张三",
  "age_years": 25,
  "address_info": {
    "city": "上海",
    "street": "南京路"
  }
}

但我们的 Vue 组件希望接收的数据格式是：

{
  "name": "张三",
  "age": 25,
  "city": "上海",
  "street": "南京路"
}

我们可以使用适配器模式来转换数据，以保持 Vue 组件的代码清晰。

✅ 适配器模式实现

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

// 适配器函数：转换旧 API 数据格式
const adaptUserData = (oldData) => {
  return {
    name: oldData.full_name,
    age: oldData.age_years,
    city: oldData.address_info.city,
    street: oldData.address_info.street
  }
}

const userData = ref(null)

onMounted(async () => {
  try {
    const response = await axios.get('/api/old-user') // 假设这个 API 返回旧格式的数据
    userData.value = adaptUserData(response.data) // 适配数据格式
  } catch (error) {
    console.error('获取用户数据失败', error)
  }
})
</script>

<template>
  <div v-if="userData">
    <h2>用户信息</h2>
    <p><strong>姓名：</strong> {{ userData.name }}</p>
    <p><strong>年龄：</strong> {{ userData.age }}</p>
    <p><strong>城市：</strong> {{ userData.city }}</p>
    <p><strong>街道：</strong> {{ userData.street }}</p>
  </div>
  <p v-else>加载中...</p>
</template>

📌 解析

adaptUserData() 充当适配器，用于转换旧 API 数据格式。

组件只关心 userData，不需要关心数据格式转换的细节，提高了可维护性。

如果未来 API 格式改变，只需修改 adaptUserData()，而不需要改动组件逻辑。

⚠️ **GitHub.com Fallback** ⚠️