Vuex 스토어 내에서 일반 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Vuex 스토어 내에서 일반 작업을 수행하는 가장 좋은 방법은 무엇입니까?

현재 Vuex store 작업 개체 내에서 API 호출을 할 때 공통 작업을 수행하려고 하는데, 현재 작업은 다음과 같습니다.

/**
 * check an account activation token
 *
 */
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
  Api.checkActivationToken(payload.token).then((response) => {
    if (response.fails()) {
      return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
    }

    return commit('SET_TOKEN')
  })
}

저는 다양한 행동을 수행하는 여러 가지 방법을 가지고 있습니다.제가 하고 싶은 것은 각 API 호출이 이루어질 때 로더를 제시하고 응답이 수신되면 다시 숨기는 것입니다.다음과 같이 달성할 수 있습니다.

/**
 * check an account activation token
 *
 */
[CHECK_ACTIVATION_TOKEN] ({commit}, payload) {
  commit('SHOW_LOADER')
  Api.checkActivationToken(payload.token).then((response) => {
    commit('HIDE_LOADER')
    if (response.fails()) {
      return commit('NEW_MESSAGE', {message: responses.activation[response.code]})
    }

    return commit('SET_TOKEN')
  })
}

그러나 각 API 호출에서 이러한 SHOW_LOADER/HIDE_LOADER 커밋을 반복해야 합니다.

제가 하고 싶은 것은 API 호출이 이루어질 때마다 로더의 표시와 숨기기가 암시적으로 호출에 바인딩되고 매번 이러한 추가 행을 포함할 필요가 없도록 이 기능을 어딘가에 중앙 집중화하는 것입니다.

명확한 설명을 위해 인스턴스화된 API는 Axios 위에 있는 클라이언트 계층으로, 호출을 시작하기 전에 준비할 수 있습니다.클라이언트 계층을 vuex 모듈 내에서 인스턴스화하므로 저장소를 클라이언트 계층으로 직접 가져올 수 없거나 Axios 이벤트가 발생하는 곳(로더 가시성을 중앙 집중화할 수 있음)으로 가져올 수 없습니다. 따라서 클라이언트 계층을 인스턴스화하려고 하면 순환 참조가 생성되므로 저장소가 정의되지 않은 상태로 반환됩니다.

제가 시도하고 있는 것이 제가 아직 마주치지 않은 어떤 고리나 사건을 통해 가능한가요?

저는 사실 이 깃허브 스레드와 에반 유가 디커플링에 대해 이야기하는 반응을 읽은 후 이 "이슈"와 관련하여 다른 길을 택했습니다.

결국 저는 API 계층이 상점에 대한 직접적인 지식을 갖도록 함으로써 두 가지를 긴밀하게 결합하기로 결정했습니다.따라서 저는 다음과 같이 스토어 커밋이 이루어지는 각 구성 요소에서 찾고 있던 SHOW 및 HIDE 기능을 처리합니다.

/**
     * check the validity of the reset token
     *
     */
    checkToken () {
      if (!this.token) {
        return this.$store.commit('NEW_MESSAGE', {message: 'No activation token found. Unable to continue'})
      }

      this.showLoader()

      this.$store.dispatch('CHECK_ACTIVATION_TOKEN', {token: this.token}).then(this.hideLoader)
    },

여기서는 각 구성 요소가 확장할 마스터 값 구성 요소에서 Vuex가 커밋하는 바로 가기 방법을 정의했습니다.그런 다음 필요할 때 showLoader를 호출하고 약속을 사용하여 프로세스가 완료된 시점을 결정하고 hideLoader를 호출합니다.

즉, 스토어와 API 계층 모두에서 프레젠테이션 로직을 제거하고 논리적으로 해당되는 위치에 보관했습니다.

이것에 대해 더 좋은 생각이 있는 사람이 있다면 저는 귀를 기울입니다.

@wostex - 답변 감사합니다!

언급URL : https://stackoverflow.com/questions/44211032/whats-the-best-way-of-achieving-common-tasks-from-within-a-vuex-store