Vue: 'before' ๋ฐ 'after'์™€ ๊ฐ™์€ 'v-on' ์ง€์‹œ๋ฌธ์— ์ผ๋ถ€ ํ›„ํฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2016๋…„ 03์›” 16์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ์š”์ฒญ:
'before' ๋ฐ 'after'์™€ ๊ฐ™์€ 'v-on' ์ง€์‹œ๋ฌธ์— ์ผ๋ถ€ ํ›„ํฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋–ป์Šต๋‹ˆ๊นŒ?

๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ๊ฒƒ:
ํด๋ฆญ ์ด๋ฒคํŠธ๊ฐ€ ํŠธ๋ฆฌ๊ฑฐ๋˜๊ธฐ ์ „์— ์ผ๋ถ€ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ํด๋ฆญ ์ „์— ์œ ํšจ์„ฑ์„ ๊ฒ€์‚ฌํ•˜์ง€ ์•Š์„ ๋งŽ์€ ๋ฒ„ํŠผ์„ ์ถ”๊ฐ€ํ•˜๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

์ž‘๋™ ๋ฐฉ์‹:
before ํ›„ํฌ๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ 'before method'๋ฅผ ์‹คํ–‰ํ•ด์•ผ ํ•˜๊ณ  ๋ฉ”์„œ๋“œ๋งŒ true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋ฉด ์‹ค์ œ ์ด๋ฒคํŠธ ๋ฐ”์ธ๋”ฉ์„ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

ํ•ธ๋“ค๋Ÿฌ ๋‚ด์—์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋™์ผํ•œ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ด๋ฅผ ํ•„ํ„ฐ๋กœ ๋งŒ๋“ค๊ฑฐ๋‚˜ JS ๋‚ด์—์„œ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function guard (handler) {
  return function (e) {
    if (...) {
      e.preventDefault()
    }
    return handler.call(this, e)
  }
}

methods: {
  onClick: guard(function (e) {
    // ...
  })
}

๋ชจ๋“  3 ๋Œ“๊ธ€

ํ˜„์žฌ ๋‚ด๊ฐ€ ์ด๊ฒƒ์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ๋ฒ•:

...
  methods: {
    someButtonClickHandler () {
      new Promise( (resolve, reject) => {
          // setup logic
      })
        .then( (result) => {
           // before logic,
        })
        .then( (result) => {
           // the handler
        })
        .catch( (err) => {
           // handle exceptions
        })
        .finally( () => {
          // cleanup ?
        })
    }  
  }
...

์˜ฌ๋ฐ”๋ฅธ ๋ฐฉ๋ฒ•์ด ์•„๋‹ ์ˆ˜๋„ ์žˆ์ง€๋งŒ ์ด๊ฒƒ์ด ์ œ๊ฐ€ ๊ท€ํ•˜์˜ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.

๊ตฌ์ฒด์ ์œผ๋กœ ํŠน๋ณ„ํžˆ:

import store from 'application/store';
import {storeAnswer} from 'application/store/actions';
import validate from 'validate.js';

export default {

  vuex: {
    storeAnswer
  },

  computed: {

    firstName: {
      get () { return store.state.Thing.firstName; },
      set (value) {
        validate.async(data, constraints)
          .then( () => {
             this.storeAnswer(value);
          });
          .catch((err)=>{
            // handle validation errors ?
          });
      }
    }

  }
};


ํ•ธ๋“ค๋Ÿฌ ๋‚ด์—์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋™์ผํ•œ ๋กœ์ง์„ ์žฌ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ ์ด๋ฅผ ํ•„ํ„ฐ๋กœ ๋งŒ๋“ค๊ฑฐ๋‚˜ JS ๋‚ด์—์„œ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function guard (handler) {
  return function (e) {
    if (...) {
      e.preventDefault()
    }
    return handler.call(this, e)
  }
}

methods: {
  onClick: guard(function (e) {
    // ...
  })
}

@yyx990803 ์ข‹์•„, ๋„ค ์š”์ ์„ ์•Œ ๊ฒƒ ๊ฐ™์•„, THX ๋งŽ์ด

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰