반응형
VueJ에서 상수를 사용하는 방법
VueJS 프로젝트:양식 오브젝트가 있으며, 각 속성은 해당 양식 입력으로 바인딩됩니다.컴포넌트 내부의 오브젝트는 다음과 같습니다.
export default {
data () {
return {
form: {
isbn: '',
title: '',
author: '',
description: '',
creationDate: ''
}
}
},
methods: {
onReset (evt) {
evt.preventDefault();
/* Reset our form values */
this.form = {
isbn: '',
title: '',
author: '',
description: '',
creationDate: ''
};
...
}
반복하기 때문에 상수를 (기본값으로) 정의한 후 위의 섹션에서 다음과 같이 사용합니다.
const DEFAULT_FORM_STATE = {
isbn: '',
title: '',
author: '',
description: '',
creationDate: ''
};
export default {
data () {
return {
form: DEFAULT_FORM_STATE
}
},
methods: {
onReset (evt) {
evt.preventDefault();
/* Reset our form values */
this.form = DEFAULT_FORM_STATE;
...
}
하지만 어떤 이유에서인지 이것은 효과가 없다.제가 시도한 옵션 중 하나는 플러그인입니다.
새로운 constants.js 파일이 있습니다.
import Vue from 'vue';
const CustomConsts = {
install(Vue, options) {
const CONSTS = {
DEFAULT_FORM_STATE: {
isbn: '',
title: '',
author: '',
description: '',
creationDate: ''
}
}
Vue.prototype.$getConst = (key) => {
return CONSTS[key]
}
}
};
export default CustomConsts;
main.js 파일에 포함시켰습니다.
...
import CustomConsts from './constants'
Vue.use(CustomConsts);
...
new Vue({
el: '#app',
render: h => h(App)
})
나중에 컴포넌트에 다시 사용하려고 했습니다.
export default {
data () {
return {
form: this.$getConst('DEFAULT_FORM_STATE')
}
},
methods: {
onReset (evt) {
evt.preventDefault();
/* Reset our form values */
this.form = this.$getConst('DEFAULT_FORM_STATE');
...
}
나는 또한 없이 노력했다this.
접두사입니다.
하지만 아무것도 작동하지 않는다.이것이 좋은 생각이 아니라면 플러그인을 사용할 필요가 없습니다.개체 전체를 기본값의 단일 상수로 대체하기 위해 사용할 수 있는 아이디어가 필요합니다.
왜 안 쓰세요?Object.assign
복사를 할 수 있게 되어 있습니다.
각 Vue 구성 요소 인스턴스에 대해 새 개체를 반환해야 합니다. 그렇지 않으면 모든 구성 요소가 동일한 개체를 공유합니다.
const DEFAULT_FORM_STATE = {
isbn: '',
title: '',
author: '',
description: '',
creationDate: ''
};
export default {
data () {
return {
form: Object.assign({},DEFAULT_FORM_STATE)
}
},
methods: {
onReset (evt) {
evt.preventDefault();
/* Reset our form values */
this.form = Object.assign({},DEFAULT_FORM_STATE);
...
}
부품에 주목해 주세요.
언급URL : https://stackoverflow.com/questions/50374373/how-to-use-a-constants-in-vuejs
반응형
'programing' 카테고리의 다른 글
Vuex: 다른 상태 변수의 값을 기반으로 하는 값으로 상태 변수를 정의하려면 어떻게 해야 합니까? (0) | 2022.08.10 |
---|---|
애니메이션 GIF 표시 (0) | 2022.08.10 |
size of을 연산자로 간주하는 이유는 무엇입니까? (0) | 2022.08.10 |
Vue: v-model이 동적 구성 요소에서 작동하지 않음 (0) | 2022.08.10 |
View 구성 요소에서 Vuex 상태 초기화를 기다리는 방법 (0) | 2022.08.10 |