Question

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

但它都不起作用。如果这不是一个好主意，我不必使用插件。我需要任何可以用一个常量替换整个对象（现在我在两个地方都有）的想法。

Answer 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) 部分。

如何在VueJS中使用常量？

1 个答案: