如何在 VueJS 中使用常量？答案

【问题标题】：How to use a constants in VueJS?如何在 VueJS 中使用常量？
【发布时间】：2018-10-26 17:08:30
【问题描述】：

一个 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.前缀。

但没有一个是行不通的。如果这不是个好主意，我不必使用插件。我需要任何可用于将整个对象（现在我在两个地方都有）替换为具有默认值的单个常量的想法。

【问题讨论】：

标签： vue.js vuejs2 constants vue-component vuex

【解决方案1】：

你为什么不每次都用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) 部分。

【讨论】：

你可以用{...DEFAULT_FORM_STATE}简化Object.asign()