Vue - API 콜이 Vuex에 속합니까?

Vue - API 콜이 Vuex에 속합니까?

vue 모듈에서 API 호출을 이상적으로 어디에 배치해야 하는지 답을 찾는 데 어려움을 겪고 있습니다.SPA는 구축하지 않습니다.예를 들어 내 인증 블록에는 로그인, 비밀번호 재설정, 계정 확인 등을 위한 몇 가지 구성 요소가 있습니다.각 블록은 API 호출에 악시오를 사용합니다.Axios는 이미 비동기적인 약속을 제공합니다.

그 질문은 최고의 프라시츠에 관한 것이다.API 호출이 Vuex 작업에 속합니까?이러한 접근법에 대한 장단점이 있습니까?

Axios 콜이 속한 컴포넌트 내에서 유지되는 데 단점이 있습니까?

Vuex나 컴포넌트가 아닌 서비스에서 API 호출을 수행합니다.기본적으로 API 호출을 스토어 코드에 혼합하는 것은 다소 멀티책임이며 컴포넌트는 뷰에 데이터를 가져오지 않는 것을 제공해야 합니다.

단순한 서비스의 예로서(Vue.http를 사용하지만 Axios 콜에서는 동일),

FileService .js

import Vue from 'vue'

export default {
  getFileList () {
    return Vue.http.get('filelist.txt')
      .then(response => {
        // massage the response here
        return filelist;
      })
      .catch(err => console.error('getFileList() failed', err) )
  },
}

아래와 같이 다른 서비스로 사용하고 있습니다(레이어 수는 고객님께 달려 있습니다).
외부 서비스는 이미 가져오기 작업이 수행되었는지 스토어를 확인하고 있습니다.

데이터 서비스js

import FileService from './file.service'

checkFiles (page) {
  const files = store.state.pages.files[page]
  if (!files || !files.length) {
    return store.dispatch('waitForFetch', {
      resource: 'files/' + page,
      fetch: () => FileService.getFileList(),
    })
  } else {
    return Promise.resolve()  // eslint-disable-line no-undef
  }
},

waitForFetch는 FileService에서 제공하는 대로 전달된 가져오기 함수를 호출하는 액션입니다.기본적으로 결과에 따라 시간 초과 및 성공 및 실패 작업 디스패치 등의 래퍼 서비스를 가져옵니다.

컴포넌트는 API 결과를 전혀 알지 못하고(시작할 수도 있지만), 데이터가 저장소에 표시될 때까지 기다릴 뿐입니다.

---

컴포넌트에서 API를 호출하는 것만으로 결점은 테스트 가능성, 앱 복잡성, 팀 규모에 따라 달라집니다.

• 테스트 가능성 - 유닛 테스트에서 서비스를 시뮬레이션할 수 있습니다.
• 앱 복잡성 - API 호출과 직교하여 타임아웃/성공/실패를 처리할 수 있습니다.
• 팀 규모 - 더 큰 팀, 작업을 더 작은 입으로 나눕니다.

언급URL : https://stackoverflow.com/questions/48494196/vue-do-api-calls-belong-in-vuex