Vue: μΈμŠ€ν„΄μŠ€ $dispatchλŠ” 값을 λ°˜ν™˜ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2016λ…„ 01μ›” 31일  Β·  3μ½”λ©˜νŠΈ  Β·  좜처: vuejs/vue

μ•ˆλ…•ν•˜μ„Έμš”, μ €λŠ” vm.$dispatch 에 λŒ€ν•΄ μ•½κ°„ ν˜Όλž€μŠ€λŸ½μŠ΅λ‹ˆλ‹€. μ™œλƒν•˜λ©΄ 콜백 _(imo)_에 λ°°μΉ˜ν•  수 μ—†λŠ” μΆ”κ°€ 논리에 λŒ€ν•΄ λ¦¬μŠ€λ„ˆμ˜ μ½œλ°±μ—μ„œ 값을 λ°˜ν™˜ν•  κ²ƒμœΌλ‘œ μ˜ˆμƒν–ˆκΈ° λ•Œλ¬Έμž…λ‹ˆλ‹€. 슀슀둜λ₯Ό 예둜 λ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. λ‚˜λŠ” Vueλ₯Ό 배우고 있으며 μ•„λ§ˆλ„ λ­”κ°€λ₯Ό 놓쳀을 κ²ƒμž…λ‹ˆλ‹€.

var vm = new Vue({
    // omitted
    events: {
        'object:creating' : function (args) {
            // omitted
            return false;
        },
        'object:created' : function (args) {
            // omitted
        }
    }
});

var child = new Vue({
    parent: vm,
    // omitted
    methods: {
        performWhatever: function (args) {
            //
        },
        createObject: function (args) {
            // Pre-create
            if ( this.$dispatch('object:creating', args) === false ) {
                // Stop the creation
            }
            // The business logic
            this.performWhatever(args);

            // Post-create
            this.$dispatch('object:created', args);
        }
    }
})

λ³΄μ‹œλ‹€μ‹œν”Ό 사전 생성 μž‘μ—…μ€ 선택 μ‚¬ν•­μž…λ‹ˆλ‹€.
κ°μ‚¬ν•©λ‹ˆλ‹€.

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

  1. $dispatchμ—λŠ” λ°˜ν™˜ 값이 μ—†μŠ΅λ‹ˆλ‹€.
  2. 이벀트 μ‹œμŠ€ν…œ($dispatch, $emit λ“±)을 μ‚¬μš©ν•˜λŠ” 것은 μ½”λ“œκ°€ λΉ„λ™κΈ°μ μ΄λΌλŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. 즉, λ‹€μŒμ— 일어날 일은 λ©”μ‹œμ§€ μˆ˜μ‹ μžμ— μ˜ν•΄ κ²°μ •λ˜λ―€λ‘œ λ‹€μŒκ³Ό 같은 것을 μž‘μ„±ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
    SomeAsyncCode === false
  3. μžλ°”μŠ€ν¬λ¦½νŠΈ μ„Έκ³„μ—μ„œλŠ” μ½œλ°±μ„ μ‚¬μš©ν•˜μ—¬ 비동기 λ‘œμ§μ„ β€‹β€‹μ²˜λ¦¬ν•˜κ³ (ν”„λΌλ―ΈμŠ€κ°€ 더 μ’‹μ§€λ§Œ μ—¬κΈ°μ„œλŠ” μ μš©λ˜μ§€ μ•ŠμŒ) $dispatch λŠ” 콜백 ν•¨μˆ˜λ₯Ό ν¬ν•¨ν•œ μ—¬λŸ¬ 인수λ₯Ό 전달할 κ²ƒμœΌλ‘œ μ˜ˆμƒν•©λ‹ˆλ‹€.
  4. λ”°λΌμ„œ 이것이 μ‹€μ œλ‘œ ν•„μš”ν•œ κ²ƒμž…λ‹ˆλ‹€.
this.$dispatch('object:creating', args, function() {
    // The business logic
    this.performWhatever(args);
})

그리고 μˆ˜μ‹ μž μΈ‘μ—μ„œλŠ”

events: {
    'object:creating' : function (args, callback) {
        // Do something with args and fire callback (or not)
        callback()
    }
}

λͺ¨λ“  3 λŒ“κΈ€

  1. $dispatchμ—λŠ” λ°˜ν™˜ 값이 μ—†μŠ΅λ‹ˆλ‹€.
  2. 이벀트 μ‹œμŠ€ν…œ($dispatch, $emit λ“±)을 μ‚¬μš©ν•˜λŠ” 것은 μ½”λ“œκ°€ λΉ„λ™κΈ°μ μ΄λΌλŠ” 것을 μ˜λ―Έν•©λ‹ˆλ‹€. 즉, λ‹€μŒμ— 일어날 일은 λ©”μ‹œμ§€ μˆ˜μ‹ μžμ— μ˜ν•΄ κ²°μ •λ˜λ―€λ‘œ λ‹€μŒκ³Ό 같은 것을 μž‘μ„±ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
    SomeAsyncCode === false
  3. μžλ°”μŠ€ν¬λ¦½νŠΈ μ„Έκ³„μ—μ„œλŠ” μ½œλ°±μ„ μ‚¬μš©ν•˜μ—¬ 비동기 λ‘œμ§μ„ β€‹β€‹μ²˜λ¦¬ν•˜κ³ (ν”„λΌλ―ΈμŠ€κ°€ 더 μ’‹μ§€λ§Œ μ—¬κΈ°μ„œλŠ” μ μš©λ˜μ§€ μ•ŠμŒ) $dispatch λŠ” 콜백 ν•¨μˆ˜λ₯Ό ν¬ν•¨ν•œ μ—¬λŸ¬ 인수λ₯Ό 전달할 κ²ƒμœΌλ‘œ μ˜ˆμƒν•©λ‹ˆλ‹€.
  4. λ”°λΌμ„œ 이것이 μ‹€μ œλ‘œ ν•„μš”ν•œ κ²ƒμž…λ‹ˆλ‹€.
this.$dispatch('object:creating', args, function() {
    // The business logic
    this.performWhatever(args);
})

그리고 μˆ˜μ‹ μž μΈ‘μ—μ„œλŠ”

events: {
    'object:creating' : function (args, callback) {
        // Do something with args and fire callback (or not)
        callback()
    }
}

@fnlctrl μ„€λͺ… κ°μ‚¬ν•©λ‹ˆλ‹€ :)

@fnlctrl μ„€λͺ… κ°μ‚¬ν•©λ‹ˆλ‹€. 비동기식이라 λΆ€λ„λŸ½λ‹€λŠ” κ±Έ κΉœλΉ‘ν–ˆλ„€ =D

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰