Vuex 处理附加类的最佳实践：导入视图还是仅在商店中？ [关闭]答案

【问题标题】：Vuex best practices for working with additional classes: import into view or only in the Store? [closed]Vuex 处理附加类的最佳实践：导入视图还是仅在商店中？ [关闭]
【发布时间】：2020-03-09 18:07:03
【问题描述】：

我正在构建一个应用程序，但不知道如何用有助于我在 Google 上找到任何内容的方式来表达这个问题。

我的问题是：当使用 Vuex store 和一些额外的类时，视图组件是直接访问这些类的最佳做法还是应该只通过 store 访问它们？ p>

更多细节：目前，我的项目有一个带有模块的 Vuex 商店（userModule 管理当前登录的用户，uiModule 管理某些用户界面元素的可见性和内容等）。

我也有一些服务。 AuthService 包含与 Firebase 的 Auth 通信的方法，DatabaseService 包含 Firestore 读/写方法。

我将服务导入到需要它们的 Vuex 存储模块中，并根据需要通过存储访问它们。阅读我的代码，在某些情况下，我直接从视图中访问了服务——例如，Login.vue 导入 AuthService 并直接访问它。像这样：

import authService from '../services/auth.service';

export default {
...
  computed() {
     authService() { return authService }
  }
...
}

<button>{{authService.auth.currentUser() ? 'log out' : 'log in'}}</button>

我认为总体而言，使用 Store 会更好，因为它会减少我导入同一对象的次数 - 尽管我不确定多次导入同一对象有多大的顾虑。感谢您的确认和讨论。

谢谢！

【问题讨论】：

标签： firebase vue.js vuex

【解决方案1】：

在整个项目中多次导入同一个模块不会造成任何损失，该模块中的顶级代码只会被执行一次。

我认为您的问题没有正确或错误的答案（它可能会因为“基于意见”而被关闭）。

每次导入模块时，它都会成为导入模块的直接依赖项。这可能会使单元测试更加困难——你如何干净地模拟导入的模块？（当然有办法做到这一点，我只是在扮演魔鬼的拥护者。）
当您像您一样直接在组件实例上公开服务类时，服务类现在变得依赖于 Vue，因为它公开的数据属性需要是反应性的，才能像这样在模板中使用。 Vue 现在将使类上的所有属性都具有反应性。类实现还需要意识到这种情况会发生，并且当它改变自己的数据时，它必须遵守 Vue 的反应性限制。
对于像获取当前用户这样简单的事情，对我来说似乎更适合存储在 Vuex 中，而不是要求每个模块都导入 auth.service。
尽量只维护一个“事实来源”，不要共享数据的所有权，因为它变得难以维护。

【讨论】：