VueJ에서 상수를 사용하는 방법

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