Как использовать константы в VueJS? - PullRequest
Новая
       9

Как использовать константы в VueJS?

0 голосов
/ 16 мая 2018

Проект 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 file: 

...
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..

Но ничего из этого не работает.Мне не нужно использовать плагин, если это не очень хорошая идея.Мне нужна идея, которую можно использовать для замены всего объекта (который теперь у меня есть в обоих местах) одной константой со значениями по умолчанию.

1 Ответ

0 голосов
/ 16 мая 2018

Почему бы вам не использовать 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); 
...
}

Обратите внимание на Object.assign({}, DEFAULT_FORM_STATE) деталей.

...