javascript - 如何避免一页中两个相同的 Vue 应用程序的代码重复？

Question

我有一个页面，我想在其中使用两个几乎相同的 Vue 应用程序。他们将只有一个简单的表，其中包含一些状态信息和一些inputs。它们唯一不同的是表的 id。我有一个单独的函数，它向他们提供数据，并以 Vue 应用程序作为其参数之一被调用（在正在下载的状态的回调中）。

所以现在我在脚本中有两个 Vue 应用程序，一个一个在一个之上，并且 48/50 行是相同的（我可以期待它们会增长）。他们每个都有几个data元素，几个methods和一个computed。我怎样才能避免如此糟糕的代码重复？

到目前为止，我的解决方案是预定义data, computed, methods( pre_...)，然后执行以下操作：

var app1 = new Vue({
  el: '#status_table_1',
  data: deepcopy(pre_data),
  methods: {
    error: function() { return pre_methods.error(this); },
    load: function(a, b, c) { return pre_methods.load(this, a, b, c); },
  },
  computed: {
    comp_prop: function() { return pre_computed.comp_prop(this); }
  }
}

这使它更苗条了，但是仍然有很多重复，而且感觉不对...

有任何想法吗？提前致谢！

标签： javascriptvue.jscode-duplication