рдирдИ рд╕реБрд╡рд┐рдзрд╛ рдХрд╛ рдЕрдиреБрд░реЛрдз:
'рд╡реА-рдСрди' рдирд┐рд░реНрджреЗрд╢ рдореЗрдВ рдХреБрдЫ рд╣реБрдХ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ, рдЬреИрд╕реЗ 'рдкрд╣рд▓реЗ' рдФрд░ 'рдмрд╛рдж'ред
рдореБрдЭреЗ рдХреНрдпрд╛ рдХрд░рдиреЗ рдХрд╛ рдорди рд╣реИ:
рдореИрдВ рдХреНрд▓рд┐рдХ рдИрд╡реЗрдВрдЯ рдЯреНрд░рд┐рдЧрд░ рд╣реЛрдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдХреБрдЫ рдорд╛рдиреНрдп рдЬреЛрдбрд╝рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рдФрд░ рдХреНрд▓рд┐рдХ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдмрд╣реБрдд рд╕реЗ рдмрдЯрди рдХреЛ рд╕рддреНрдпрд╛рдкрд┐рдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдПред
рдпрд╣ рдХрд╛рдо рдХрд┐рд╕ рдкреНрд░рдХрд╛рд░ рдХрд░рддрд╛ рд╣реИ:
рдЕрдЧрд░ рдореЗрд░реЗ рдкрд╛рд╕ рдкрд╣рд▓реЗ рд╣реБрдХ рд╣реИ, рддреЛ рдореБрдЭреЗ 'рд╡рд┐рдзрд┐ рд╕реЗ рдкрд╣рд▓реЗ' рдЪрд▓рд╛рдиреЗ рдХреА рдЬрд╝рд░реВрд░рдд рд╣реИ рдФрд░ рдХреЗрд╡рд▓ рд╡рд┐рдзрд┐ рд╡рд╛рдкрд╕ рдЖрддреА рд╣реИ, рдореИрдВ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдШрдЯрдирд╛ рдмрд╛рдзреНрдпрдХрд╛рд░реА рдХрд░реВрдБрдЧрд╛ред
рдореИрдВ рдЗрд╕ рд╕рдордп рдЗрд╕реЗ рдХреИрд╕реЗ рд╕рдВрднрд╛рд▓рддрд╛ рд╣реВрдВ:
...
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 рдмрд╣реБрдд рдХреБрдЫ
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдЖрдк рдЗрд╕реЗ рд╣реИрдВрдбрд▓рд░ рдХреЗ рдЕрдВрджрд░ рдмрд╕ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдпрджрд┐ рдЖрдкрдХреЛ рдЙрд╕реА рддрд░реНрдХ рдХрд╛ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рддреЛ рдЖрдк рдпрд╛ рддреЛ рдЗрд╕реЗ рдПрдХ рдлрд╝рд┐рд▓реНрдЯрд░ рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ рдпрд╛ рдЗрд╕реЗ JS рдХреЗ рдЕрдВрджрд░ рд╣реА рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВ: