请教前端同学，你们获取数据是放在哪一层？

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2519 days ago, the information mentioned may be changed or developed.

比如 vue，目前是这个结构

index.vue
---header.vue //纯静态
---search.vue //有搜索参数给 list 更新
---list.vue // 列表里可能有更新自己的操作
---side.vue //侧边栏需要获取自己需要的数据

我理解的时无论是 search 参数改变或者 list 自己的改变，都应该传递到外面 index.vue 来统一管理 /更新（ ajax ）获取新数据（传递到各子组件）。。。

这样对吗？

List

获取

更新

参数

25 replies • 2019-07-05 17:31:19 +08:00

bhaltair

Jul 4, 2019

统一放到 vuex?

ChefIsAwesome

Jul 4, 2019

这个跟 state 放哪一个道理，得看情况写。数据要不要共享，要不要缓存，有没有 race condition。有的时候放上层方便，有的时候不方便。

WhoAmIAndwhoAreU

Jul 4, 2019

哪个地方需要用数据，就放在哪里，如果需要跨组件，就放在全局呗,vuex

LongMaoz

Jul 4, 2019

看情况，写一个单例共享数据的 Service 层也行，用 Vue 的话应该是用 Vuex 共享数据，但是比较麻烦

15651980765

Jul 4, 2019

如果数据只在某个组件里使用就在那个组件里获取；
如果数据被几个组件使用，而这几个组件有公共的父组件，可以在父组件获取然后通过组件传值传给子组件；
如果数据是公共的，很多地方都要使用，那就引入 Vue 提供的状态管理 Vuex。

leisunlove

Jul 4, 2019

老哥去 github 上 clone 一个 vue 项目，看看别人是怎么写的。别自己瞎搞，恶心未来接手的前端同学

kinghly

Jul 4, 2019

就一个带筛选的列表页面来讲，是这样的。

oatw

Jul 4, 2019

所有跟后端接口交互的数据统一放到 Servicie 层（自建）封装，这样将来就算 Vue 版本更新，甚至不用 Vue，数据部分的代码也可以复用。Vuex 视情况使用，很多时候你需要的可能只是一个 Service 层内存常驻的对象引用。

banricho

Jul 4, 2019

你的思路没问题，在最初没有状态管理库的时候，为了避免数据和事件来回飞，确实都统一放在了最上层。
现在有 vuex，也有 mobx 之类的东西，直接用就好了。或者自己也可以写个 store 来管理，利用 vue 的响应式系统可以很轻松的做到。

hoyixi

Jul 4, 2019

没有路由？全靠 click 切换数据?

owenliang

Jul 4, 2019

全局共享的放在 HOC 里获取然后存到 store 中，个别组件自己的那就是组件去获取后再保存到 store 中。

Hoshinokozo

Jul 4, 2019

vue 是单向数据流，所以父子都需要用的数据放在父组件，通过 props 传给子组件，子组件内部的数据就放在子组件，
子组件之间共享的数据要么放在共同的父组件，要么放在 vuex

nbin2008

Jul 4, 2019

不知道放哪里 && 多个地方要用，store 你值得拥有

KuroNekoFan

Jul 4, 2019

这些都很难一概而论，引用 react 核心开发者 dan 的话来说
```
Keep the local state isolated. Think about which state is local to a particular UI representation — and don ’ t hoist that state higher than necessary.
```