Vuex获取单个客户数据：Getter过滤VS Action+SQL查询

嘿，你的问题特别接地气，很多刚做全栈的同学都会遇到这种选择困境。先帮你把方案二的bug解决了，再对比两个方案的适用场景～

先搞定方案二的undefined错误 #

你控制台出现undefined是因为getter里的代码有两个小问题：

1. 用了赋值运算符=而不是比较运算符===，这会把id赋值给customer.id，而不是判断相等
2. filter返回的是匹配的数组，你要的是单个客户对象，应该用find

修正后的getter代码应该是这样：

const getters = {
  allcustomers: (state) => state.customers,
  onecustomer: (state) => (id) => state.customers.find(customer => customer.id === id)
}

改完之后应该就不会出现undefined的问题了。

两个方案的优劣对比 #

方案一更优的场景（大部分业务场景） #

方案一的设计更符合RESTful架构，也更适合大多数实际业务，优势主要在这几点：

• 性能更高效：数据库是专门优化过查询的，尤其是当你给kunde.id加索引后，查询单个客户的速度比前端从几百上千条数据里过滤快得多；而且前端不用加载全量数据，节省内存和带宽，移动端用户体验会更好。
• 数据实时性有保障：如果其他用户或者后端服务修改了某个客户的数据，方案一每次请求单个客户都会拿到最新的数据；而方案二缓存了全量数据，除非重新拉取，否则看到的是旧数据。
• 职责更清晰：后端负责数据的筛选和查询，前端专注于展示逻辑，后续维护起来更方便——比如以后需要加查询条件，直接改后端路由就行，不用动前端代码。

方案二的适用场景 #

方案二不是完全没用，在以下特殊场景下可以考虑：

• 客户数据量极小（比如只有几十条），而且数据几乎不会变更（比如静态配置数据）
• 需要频繁切换查看不同客户，且能接受短时间内的旧数据（减少请求次数）

总结 #

如果你的业务是正常的客户管理系统，数据量可能增长、数据会有更新操作，方案一是更稳妥的选择。方案二更适合小体量静态数据的场景，但前提是先把代码里的bug修复好。

内容的提问来源于stack exchange，提问作者Carrot