์๋ก์ด ๊ธฐ๋ฅ ์์ฒญ:
'before' ๋ฐ 'after'์ ๊ฐ์ 'v-on' ์ง์๋ฌธ์ ์ผ๋ถ ํํฌ๋ฅผ ์ถ๊ฐํ๋ ๊ฒ์ ์ด๋ป์ต๋๊น?
๋ด๊ฐ ํ๊ณ ์ถ์ ๊ฒ:
ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ํธ๋ฆฌ๊ฑฐ๋๊ธฐ ์ ์ ์ผ๋ถ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ์ถ๊ฐํ๊ณ ํด๋ฆญ ์ ์ ์ ํจ์ฑ์ ๊ฒ์ฌํ์ง ์์ ๋ง์ ๋ฒํผ์ ์ถ๊ฐํ๊ณ ์ถ์ต๋๋ค.
์๋ ๋ฐฉ์:
before ํํฌ๊ฐ ์๋ ๊ฒฝ์ฐ 'before method'๋ฅผ ์คํํด์ผ ํ๊ณ ๋ฉ์๋๋ง true๋ฅผ ๋ฐํํ๋ฉด ์ค์ ์ด๋ฒคํธ ๋ฐ์ธ๋ฉ์ ์ํํฉ๋๋ค.
ํ์ฌ ๋ด๊ฐ ์ด๊ฒ์ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ:
...
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 ๋ด์์ ๊ตฌ์ฑํ ์ ์์ต๋๋ค.