vuex ajax 호출 및 여러 구성 요소

Question

vuex 및이 호출에서 데이터를 공유하는 여러 구성 요소를 사용하여 ajax 호출의 모범 사례에 대해 알고 싶습니다.

해당 통화의 로딩, 성공 및 오류 속성을 상점에 저장하여 구성 요소까지 채우고 있습니까? 가장 좋은 방법이 뭔지 잘 모르겠습니다. 또한 Ajax를 호출하기를 꺼리는 이유는 모든 구성 요소에서 아약스를 호출하기를 원하지 않기 때문입니다.

new Vuex.Store({ 
    state: { 
     persons: { 
      data: null, 
      loading: false, 
      error: null 
     } 
    } 
}); 

나는 각 API 호출이 작업을 수행 한 후 내가 거기에 보관 : 제가 위에서 언급 한 바와 같이

는 지금은 저장하고있다. 더 좋은 방법?

Answer 1

This article에는 ajax 호출을 구현하고 vuex 상태를 업데이트하기위한 몇 가지 패턴이 설명되어 있습니다. 개인적으로 필자는 저자가 아약스 호출을 동작으로 vuex 저장소로 이동하는 방법 3이 기사에서 지적했듯이 상태 및 프리젠 테이션 논리를 분리하기 때문에 동의합니다. 당신이 여기에서 볼 수있는, 아약스 호출은 다음과 같이 캡슐화 그래서

store = new Vuex.Store({ 
    state: { 
     message: '' 
    }, 
    mutations: { 
     updateMessage(state, payload) { 
      state.message = payload 
     } 
    }, 
    actions: { 
     refreshMessage(context) { 
      return new Promise((resolve) => { 
       this.$http.get('...').then((response) => { 
        context.commit('updateMessage', response.data.message); 
        resolve(); 
       }); 
      }); 
     } 
    } 
}); 

Vue.component('my-component', { 
    template: '<div>{{ message }}</div>', 
    methods: { 
     refreshMessage() { 
      this.$store.dispatch('refeshMessage').then(() => { 
      // do stuff 
     }); 
     } 
    }, 
    computed: { 
     message: { return this.$store.state.message; } 
    } 
}); 

: 당신은 상태가 기사에서

코드 예제를 돌연변이 수있을 때 알고 액션에서 약속을 반환 할 수 있기 때문에이 또한 도움이된다 vuex 조치. ajax 호출의 데이터를 사용하는 구성 요소에서 구성 요소는 ajax 호출을 만들고 저장소의 데이터를 업데이트하는 작업 (this. $ store.dispatch ('refreshMessage')., ...)을 수행 할 수 있습니다. 구성 요소에는 저장소의 데이터에 종속 된 무효 속성이 이미 있으므로 저장소에 새 데이터가 있으면 자동으로 업데이트됩니다.