Vue: 'рд╡реА-рдСрди' рдирд┐рд░реНрджреЗрд╢ рдореЗрдВ рдХреБрдЫ рд╣реБрдХ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ, рдЬреИрд╕реЗ 'рдкрд╣рд▓реЗ' рдФрд░ 'рдмрд╛рдж'

рдХреЛ рдирд┐рд░реНрдорд┐рдд 16 рдорд╛рд░реНрдЪ 2016  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: vuejs/vue

рдирдИ рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрд░реЛрдз:
'рд╡реА-рдСрди' рдирд┐рд░реНрджреЗрд╢ рдореЗрдВ рдХреБрдЫ рд╣реБрдХ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ, рдЬреИрд╕реЗ 'рдкрд╣рд▓реЗ' рдФрд░ 'рдмрд╛рдж'ред

рдореБрдЭреЗ рдХреНрдпрд╛ рдХрд░рдиреЗ рдХрд╛ рдорди рд╣реИ:
рдореИрдВ рдХреНрд▓рд┐рдХ рдИрд╡реЗрдВрдЯ рдЯреНрд░рд┐рдЧрд░ рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдХреБрдЫ рдорд╛рдиреНрдп рдЬреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рдФрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдмрд╣реБрдд рд╕реЗ рдмрдЯрди рдХреЛ рд╕рддреНрдпрд╛рдкрд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред

рдпрд╣ рдХрд╛рдо рдХрд┐рд╕ рдкреНрд░рдХрд╛рд░ рдХрд░рддрд╛ рд╣реИ:
рдЕрдЧрд░ рдореЗрд░реЗ рдкрд╛рд╕ рдкрд╣рд▓реЗ рд╣реБрдХ рд╣реИ, рддреЛ рдореБрдЭреЗ 'рд╡рд┐рдзрд┐ рд╕реЗ рдкрд╣рд▓реЗ' рдЪрд▓рд╛рдиреЗ рдХреА рдЬрд╝рд░реВрд░рдд рд╣реИ рдФрд░ рдХреЗрд╡рд▓ рд╡рд┐рдзрд┐ рд╡рд╛рдкрд╕ рдЖрддреА рд╣реИ, рдореИрдВ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдШрдЯрдирд╛ рдмрд╛рдзреНрдпрдХрд╛рд░реА рдХрд░реВрдБрдЧрд╛ред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЖрдк рдЗрд╕реЗ рд╣реИрдВрдбрд▓рд░ рдХреЗ рдЕрдВрджрд░ рдмрд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдпрджрд┐ рдЖрдкрдХреЛ рдЙрд╕реА рддрд░реНрдХ рдХрд╛ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рддреЛ рдЖрдк рдпрд╛ рддреЛ рдЗрд╕реЗ рдПрдХ рдлрд╝рд┐рд▓реНрдЯрд░ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ рдпрд╛ рдЗрд╕реЗ 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 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

lmnsg picture lmnsg  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

finico picture finico  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

wufeng87 picture wufeng87  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

seemsindie picture seemsindie  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

WolfgangFellger picture WolfgangFellger  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ