Vuex: 컴포넌트 내에서 액션을 사용하는 것과 처리를 사용하는 것의 차이점

Vuex: 컴포넌트 내에서 액션을 사용하는 것과 처리를 사용하는 것의 차이점

Vuex의 작업이 컴포넌트 내에서만 처리되지 않는 이유를 알 수 없습니다.
기본 스토어가 있는 경우:

store.displaces를 설정합니다.

const initialState = () => ({
    overlayText: ''
}) 

const mutations = {
    setOverlayText: (state, payload) => {
        state.overlayText = payload;
    },
}

const actions = {   
    clearOverlay: (context, data) => {
        return axios.get(data.url).then((response) => {
            context.commit('setOverlayText', response);
        });
    },
}

---

API 호출을 하고 Vuex Action을 사용하여 아래와 같이 데이터를 변경하는 경우:

옵션 1

<button @click="dispatchClearOverlay">Get Data</button>

methods: {
    clearOverlay() {
        this.$store.dispatch('clearOverlay', {
            url: '/api/clear-overlay',
        })
    }
}

이렇게 컴포넌트 내에서만 하는 것과 어떤 차이가 있습니까?

옵션 2

<button @click="clearOverlay">Get Data</button>

methods: {
    clearOverlay() {
        axios.get('api/clear-overlay')
        .then(resp => {
            this.$store.commit('setOverlayText', response);
        })
    }
}

제시된 예는 옵션1의 경우와 약간 다릅니다.옵션 1에서는 이 값이 저장될 수 있는 유일한 값입니다.state.overlayText에서의 응답입니다./api/clear-overlay단, 옵션2에서는 변환을 커밋할 때 임의의 텍스트를 전달할 수 있으며 이 값은 다음 위치에 저장됩니다.state.overlayText.

보다 일반적으로, 몇 가지 중요한 차이점이 있습니다.돌연변이는 동기화되어야 하며 동작은 비동기적일 수 있습니다.단일 작업을 디스패치하여 여러 돌연변이를 발생시킬 수도 있습니다(같은 세 돌연변이를 자주 호출해야 하는 경우를 상상해 보십시오).이 두 가지 기능을 통해 Store 로직을 집중 관리하면서 컴포넌트를 깔끔하게 유지할 수 있습니다.

액션 문서의 "디스패치 액션" 섹션은 이러한 점을 설명하는 데 도움이 됩니다.

언급URL : https://stackoverflow.com/questions/66432693/vuex-difference-between-using-an-action-vs-handling-within-component