Nuxt.jsxTyperscript에서 API 통신의 디자인 모드를 사용해 보았습니다

개시하다

이번에는 API 요청 처리에 대한 분할 관리 모드를 알았습니다. Nuxt.jsxTypeScript 항목에서 실제로 시도했습니다.더 좋은 글쓰기가 있다면 평론란에 알려주세요.
이 모드를 적용하는 목적은 다음과 같습니다.

단점의 경로 변경 등이 발생할 때 논리에 대한 영향을 끊는다

데이터에 접근한 코드를 재사용할 수 있도록

섀시로 변경

또한 백엔드는 RESTful API로 가정합니다.

컨디션

Nuxt.js 2.x

Vue 2

vue-composition-api

TypeScript

Repository

먼저 Repository를 살펴보겠습니다.
RESTful API의 CRUD에 따라 준비index,show,create,update,delete 방법.
api/repository.ts

import { NuxtAxiosInstance } from '@nuxtjs/axios';
import { AxiosResponse } from 'axios'

export interface CRUDActions {
  index<T>(query?: string): Promise<AxiosResponse<T>>
  show<T>(id: number): Promise<AxiosResponse<T>>
  create<T>(payload: any): Promise<AxiosResponse<T>>
  update<T>(payload: any, id?: number): Promise<AxiosResponse<T>>
  delete(id?: number): Promise<AxiosResponse<any>>
}

export default (client: NuxtAxiosInstance) => (resource: string) => ({
  index<T>(query?: string) {
    return client.get<T>(`api/${resource}?${query}`)
  },
  show<T>(id: number) {
    return client.get<T>(`api/${resource}/${id}`)
  },
  create<T>(payload: any) {
    return client.post<T>(`api/${resource}`, payload)
  },
  update<T>(payload: any, id?: number) {
    return client.patch<T>(resourcePath(resource, id), payload)
  },
  delete(id?: number) {
    return client.delete(resourcePath(resource, id))
  }
})

const resourcePath = (resource: string, id?: number) => {
  let path
  if (id) {
    path = `api/${resource}/${id}`
  } else {
    path = `api/${resource}`
  }
  return path
}

RESTful API 중has원 관계라면 id가 포함되지 않고 단수 형식의 경로를 통해 얻을 수 있습니다.예: api/users/bank_account그 상황을 감안하면resourcePath 방법은 id가 있는지 없는지에 대해 지점을 필요로 한다.(더 좋은 방법이 있나요?)

RepositoryFactory

다음은 Repository-factory입니다.
plugins/repository-factory.ts

import createRepositories, { CRUDActions } from '@/api/repository'

export interface Repositories {
  clients: CRUDActions
  // リソースが増えるごとに追加する
}

export default (context: any, inject: any) => {
  const repositoryWithAxios = createRepositories(context.$axios)
  const repositories = {
    clients: repositoryWithAxios('clients') // リソース名とマッピングする
  }
  inject('repositories', repositories)
}

마지막context.root일 때 유형 정보를 참조할 수 있도록 다음과 같이 기술한다.
nuxt.config.ts

import { Configuration } from '@nuxt/types'
import { NuxtAxiosInstance } from '@nuxtjs/axios'
import { Repositories } from '@/plugins/repository-factory'

const nuxtConfig: Configuration = {
  // 省略
}

declare module 'vue/types/vue' {
  interface Vue {
    $axios: NuxtAxiosInstance
    $repositories: Repositories // 追加
  }
}

이렇게 준비하면 완성된다.

사용 예

다음은 실제 사용의 예이다.
clients.vue

<template>...</template>

<script lang="ts">
import { defineComponent, provide } from '@vue/composition-api'
import clientStore from '@/store/client'
import ClientKey from '@/store/client-key'

export default defineComponent({
  setup(_, context) {
    const store = clientStore()
    store.actions.getData(context.root.$repositories) // repositories を渡す

    provide(ClientKey, store)
  }
})
</script>

store/client.ts

import { Repositories } from '@/plugins/repository-factory'
import { ClientResponse } from '@/types/model/client'

..

const actions = {
  async getData(repositories: Repositories) {
    try {
      const res = await repositories.clients.index<ClientResponse[]>() // repository を利用
      ...
    } catch (error) {
      // error handling
    }
  },
},

액세스 데이터의 처리를 순조롭게 숨겼다.타입의 보완도 효과가 있다.

감상

처리된 자원이 증가repository-factory.ts하더라도 필요한 곳에 자원명을 추가하면 데이터 접근 처리도 재활용할 수 있어 편리하다.시험도 쉬워졌어요.

참조 링크

[Vue.js] 웹 API 통신의 디자인 모델(개인 모범 사례)

Organize and decouple your API calls in Nuxt.js