VueJS在$ store中定义了两个组件中的计算逻辑

Question

在我的vue应用程序中，我在两个不同的组件中具有以下计算属性：

normalizeName() {
  website = this.form.website_id;
  let res = '', new_val = '';
  if (this.websites.find(obj => obj.website_id === website)) {
      this.form.name = '';
      res = this.websites.find(obj => obj.website_id === website);
      new_val = res.acronym + ' - ';
      this.form.name = new_val;
      return new_val;
    }
  }

现在，我使用$store定义了状态管理，但问题是： 在最佳实践和性能方面，我应该在normalizeName()中定义$store并使用其逻辑，还是应该在两个不同的组件中实现完全相同的逻辑？

Answer 1

实际上，无论哪种方式都会有很小的性能差异。就代码重复与$store抽象问题而言 - 我个人认为少量重复会提高可读性和可维护性。与将该功能推送到其他地方相比。

This article解释了为什么情况会比我更好。

您需要考虑$store是否有合理规范名称的功能。此外，如果不仅仅是这两个组件使用商店 - 该功能可能属于组件本身而不是商店。对我而言，规范化功能在商店中看起来不合适。

也许如果您认为该功能需要第三次实施，那么您应该找到一种方法将其移动到其他地方以保持一致性/便利性。