Cookie Consent by Free Privacy Policy Generator 📌 A simple explanation of Adapter Pattern with Vue.js


✅ A simple explanation of Adapter Pattern with Vue.js


💡 Newskategorie: Programmierung
🔗 Quelle: dev.to

Hi there.

Today I will share how I understood the Adapter Pattern using Vue.js. In short, the Adapter Pattern in Vue.js is used to "adapt" the interface of a component, method, or service so that it can be used in a compatible way with other parts of the code that expect a different interface.

This pattern is useful for integrating third-party components, APIs, or libraries that are not directly compatible with your Vue.js application, allowing for smoother, more flexible integration.

Here is an example:

1- I have a Home.vue file that will do a request to a random API (restcountries):

<script setup lang="ts">
async function getCountry(name: string) {
  const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`)
  return response.data.value
}

let country: any = await getCountry('brasil')
</script>
<template>
  <div>
    <pre>
        {{ country }}
    </pre>
  </div>
</template>

Here is the return of the API request:
Return of API

So, let's imagine that we only need three variables from this response, formatted in a specific way:

interface Country {
  countryName: string
  countryCapital: string
  countryPopulation: number
}

2- I will create another file named adapters.ts and define a function to transform the current format into the one expected by the Country interface:

interface Country {
  countryName: string
  countryCapital: string
  countryPopulation: number
}

// Function that receives the API response and adapts it to an array of Country objects
export function getCountryAdapter(apiResponse: any): Country[] {
  // Check if is an array
  if (!Array.isArray(apiResponse)) {
    throw new Error('The API response is not a Array of countries.')
  }

  // Maps each country in the response to the Country object format
  const countries: Country[] = apiResponse.map((country: any) => ({
    countryName: country.name.common,
    countryCapital: country.capital[0],
    countryPopulation: country.population,
  }))

  return countries
}

3- Now, let's call the adapter in the Home.vue file:

<script setup lang="ts">
import { getCountryAdapter } from '../services/adapters'

async function getCountry(name: string) {
  const response = await useFetch(`https://restcountries.com/v3.1/name/${name}`)
  const country = getCountryAdapter(response.data.value)
  return country
}

let country: any = await getCountry('brasil')
</script>
<template>
  <div>
    <pre>
        {{ country }}
    </pre>
  </div>
</template>

4- The final result is the response adapted to the interface 😊:

Adapted response

If you have any suggestions, please let me know. Thank you so much for reading!

...

✅ A simple explanation of Adapter Pattern with Vue.js


📈 61.08 Punkte

✅ Moving From Vue 1 To Vue 2 To Vue 3: A Case Study Of Migrating A Headless CMS System


📈 38.34 Punkte

✅ Design Pattern #5 - Adapter Pattern


📈 36.79 Punkte

✅ How To Create A Mobile App Using Vite, Vue and Ionic Capacitor In 8 Minutes Including Explanation


📈 29.55 Punkte

✅ Worker Pool Design Pattern Explanation


📈 29.43 Punkte

✅ Design patterns: Part One - A brief explanation of creational pattern


📈 29.43 Punkte

✅ A Fairly Short Explanation of the Dependency Injection Pattern with Python


📈 29.43 Punkte

✅ Enhance the drag and drop of your Vue 3 application with Vue Fluid DnD


📈 25.56 Punkte

✅ HTML & Vue.js, a secrete you may not know about Vue


📈 25.56 Punkte

✅ Vue Designer 1.4 - Desktop editor to visually design Vue applications.


📈 25.56 Punkte

✅ 500+ Vue.js Tailwind CSS UI Components - TailGrids Vue


📈 25.56 Punkte

✅ Easy Vue internationalization - guide to the Vue I18n plugin


📈 25.56 Punkte

✅ Vue i18n – So erstellst Du mehrsprachige Vue.js Anwendungen!


📈 25.56 Punkte

✅ NativeScript-Vue 2.0 erschienen: Native Mobile-Apps mit Vue


📈 25.56 Punkte

✅ Figma to Vue: Convert Designs to Clean Vue Code in a Click


📈 25.56 Punkte

✅ Efficiently Managing Remote Data in Vue with Vue Query


📈 25.56 Punkte

✅ Draw a dynamic SVG pattern with Vue


📈 25.43 Punkte

✅ Service: O pattern que virou anti-pattern


📈 25.31 Punkte

✅ Go program pattern 01: Functional Options Pattern


📈 25.31 Punkte

✅ Pub/Sub pattern vs Observer Pattern: what's the difference?


📈 25.31 Punkte

✅ A transição do Higher-Order Component pattern para o React Hooks pattern


📈 25.31 Punkte

✅ Module-Pattern | Javascript Design Pattern Simplified | Part 4


📈 25.31 Punkte

✅ Neu in .NET 7 [5]: List Pattern und Slice Pattern mit C# 11


📈 25.31 Punkte

✅ Decorator-Pattern | Javascript Design Pattern Simplified | Part 5


📈 25.31 Punkte

✅ C# Pattern Matching Inside Out: Kompakter und prägnanter C#-Code durch Pattern Matching


📈 25.31 Punkte

✅ Factory-Pattern | Javascript Design Pattern Simplified | Part 2


📈 25.31 Punkte

✅ Factory Pattern: Alle Informationen zum Factory Method Pattern


📈 25.31 Punkte

✅ Observer-Pattern | Javascript Design Pattern Simplified | Part 3


📈 25.31 Punkte

✅ Observer Pattern: Was steckt hinter dem Observer Design Pattern?


📈 25.31 Punkte

✅ Singleton-Pattern | Javascript Design Pattern Simplified | Part 1


📈 25.31 Punkte

✅ Design Pattern #4 - Publisher/Subscriber Pattern


📈 25.31 Punkte

✅ [dos] Pdfium - Out-of-Bounds Read with Shading Pattern Backed by Pattern Colorspace


📈 25.31 Punkte

✅ Design Pattern #3 - Observer Pattern


📈 25.31 Punkte

✅ Design Pattern #2 - Facade Pattern


📈 25.31 Punkte











matomo

Datei nicht gefunden!