Vuex 2.0 디스패치 대 커밋

Vuex 2.0 디스패치 대 커밋

파견 대 커밋을 언제 사용할지 누가 설명해줄래?

나는 커밋이 돌연변이를 유발하고, 디스패치가 행동을 유발한다는 것을 이해한다.

하지만 파견도 일종의 행동 아닌가.

당신이 옳게 말했듯이$dispatch액션을 트리거하고commit돌연변이를 유발하다다음 개념을 사용하는 방법:

당신은 항상 사용한다.$dispatch경로/구성 요소에 대한 당신의 방법으로부터. $dispatchvuex 저장소에 메시지를 보내서 작업을 수행하도록 하십시오.이 작업은 현재 체크 표시 후 언제든지 수행될 수 있으므로 프런트 엔드 성능에 영향을 미치지 마십시오.

넌 절대 안 해commit모든 구성 요소/경로에서.수행 내에서만 수행되며 커밋할 데이터가 있을 때만 수행된다.이유: 커밋은 동기식이며 끝날 때까지 프런트엔드를 얼릴 수 있다.

이 경우를 생각해 봅시다:서버에서 json 데이터를 가져와야 하는 경우이 경우 사용자 인터페이스가 잠시 동안 응답하지 않거나 동결되지 않도록 비동기식으로 이 작업을 수행해야 한다.그러니까, 넌 그냥$dispatch나중에 할 수 있을 것으로 기대하는 행동작업이 이 작업을 수행하고 서버에서 데이터를 로드한 후 나중에 상태를 업데이트하십시오.

작업이 완료되는 시점을 알아야 그때까지 아약스 스피너를 표시할 수 있는 경우 아래 설명에 따라 약속(예: 현재 사용자 로드)을 반환할 수 있다.

"loadCurrentUser" 작업을 정의하는 방법은 다음과 같다.

actions: {
    loadCurrentUser(context) {
        // Return a promise so that calling method may show an AJAX spinner gif till this is done
        return new Promise((resolve, reject) => {
            // Load data from server
            // Note: you cannot commit here, the data is not available yet
            this.$http.get("/api/current-user").then(response => {
                // The data is available now. Finally we can commit something
                context.commit("saveCurrentUser", response.body)  // ref: vue-resource docs
                // Now resolve the promise
                resolve()
            }, response => {
                // error in loading data
                reject()
            })
        })
    },
    // More actions
}

돌연변이 처리기에서 동작에서 발생하는 모든 커밋을 수행하십시오."saveCurrentUser" 커밋을 정의하는 방법은 다음과 같다.

mutations: {
    saveCurrentUser(state, data) {
        Vue.set(state, "currentUser", data)
    },
    // More commit-handlers (mutations)
}

구성 요소에서 해당 구성 요소가created또는mounted, 아래 표시된 대로 작업을 호출하십시오.

mounted: function() {
    // This component just got created. Lets fetch some data here using an action
    // TODO: show ajax spinner before dispatching this action
    this.$store.dispatch("loadCurrentUser").then(response => {
        console.log("Got some data, now lets show something in this component")
        // TODO: stop the ajax spinner, loading is done at this point.
    }, error => {
        console.error("Got nothing from server. Prompt user to check internet connection and try again")
    })
}

위와 같이 약속을 반환하는 것은 전적으로 선택 사항이며 모든 사람이 선호하는 설계 결정도 아니다.약속의 반환 여부에 대한 자세한 내용은 다음 답변에 따른 의견을 읽어 보십시오.

참조URL: https://stackoverflow.com/questions/40390411/vuex-2-0-dispatch-versus-commit