vuex ajax 호출 및 여러 구성 요소

vuex ajax 호출 및 여러 구성 요소

vuex 및 여러 컴포넌트가 이 콜의 데이터를 공유하는 Ajax 콜의 베스트 프랙티스를 알고 싶습니다.

해당 콜의 로드, 성공 및 오류 속성을 스토어에 저장하여 컴포넌트까지 모두 채워야 합니까?뭐가 최선인지 잘 모르겠어요.또한 모든 컴포넌트에서 Ajax를 호출하는 것은 한 번 호출하는 목적에 어긋나기 때문에 원하지 않습니다.

현재, 상기와 같이 보존하고 있습니다.

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

각 API 호출에 대해 이 작업을 수행하고 거기에 저장합니다.더 좋은 방법은?

이 문서에서는 ajax 콜을 구현하고 vuex 상태를 업데이트하기 위한 몇 가지 패턴에 대해 설명합니다.기사에서 지적한 바와 같이 상태 및 프레젠테이션 로직이 분리되기 때문에 액션으로서 ajax 콜을 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; }
    }
});

보시다시피 ajax 콜은 vuex 액션으로 캡슐화 됩니다.Ajax 콜의 데이터에 의존하는 컴포넌트에서는 컴포넌트는 액션(이것)을 실행할 수 있습니다.$store.dispatch('refresh Message').그러면...)는 Ajax 호출을 하고 스토어의 데이터를 업데이트합니다.구성 요소는 이미 저장소의 데이터에 따라 반응하는 속성을 가지고 있으므로 저장소에서 새 데이터가 있으면 자동으로 업데이트됩니다.

언급URL : https://stackoverflow.com/questions/46349907/vuex-ajax-call-and-several-components