V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
firhome
V2EX  ›  程序员

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

  •  
  •   firhome · 2019-07-04 16:05:29 +08:00 · 4864 次点击
    这是一个创建于 1948 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如 vue,目前是这个结构

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

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

    这样对吗?
    25 条回复    2019-07-05 17:31:19 +08:00
    bhaltair
        1
    bhaltair  
       2019-07-04 16:13:13 +08:00
    统一放到 vuex?
    ChefIsAwesome
        2
    ChefIsAwesome  
       2019-07-04 16:25:39 +08:00
    这个跟 state 放哪一个道理,得看情况写。数据要不要共享,要不要缓存,有没有 race condition。有的时候放上层方便,有的时候不方便。
    WhoAmIAndwhoAreU
        3
    WhoAmIAndwhoAreU  
       2019-07-04 16:26:19 +08:00
    哪个地方需要用数据,就放在哪里,如果需要跨组件,就放在全局呗,vuex
    LongMaoz
        4
    LongMaoz  
       2019-07-04 16:32:22 +08:00
    看情况,写一个单例共享数据的 Service 层也行,用 Vue 的话应该是用 Vuex 共享数据,但是比较麻烦
    15651980765
        5
    15651980765  
       2019-07-04 16:47:13 +08:00
    如果数据只在某个组件里使用就在那个组件里获取;
    如果数据被几个组件使用,而这几个组件有公共的父组件,可以在父组件获取然后通过组件传值传给子组件;
    如果数据是公共的,很多地方都要使用,那就引入 Vue 提供的状态管理 Vuex。
    leisunlove
        6
    leisunlove  
       2019-07-04 16:51:55 +08:00
    老哥去 github 上 clone 一个 vue 项目,看看别人是怎么写的。别自己瞎搞,恶心未来接手的前端同学
    kinghly
        7
    kinghly  
       2019-07-04 16:53:22 +08:00
    就一个带筛选的列表页面来讲,是这样的。
    oatw
        8
    oatw  
       2019-07-04 16:56:15 +08:00
    所有跟后端接口交互的数据统一放到 Servicie 层(自建)封装,这样将来就算 Vue 版本更新,甚至不用 Vue,数据部分的代码也可以复用。Vuex 视情况使用,很多时候你需要的可能只是一个 Service 层内存常驻的对象引用。
    banricho
        9
    banricho  
       2019-07-04 16:57:34 +08:00
    你的思路没问题,在最初没有状态管理库的时候,为了避免数据和事件来回飞,确实都统一放在了最上层。
    现在有 vuex,也有 mobx 之类的东西,直接用就好了。或者自己也可以写个 store 来管理,利用 vue 的响应式系统可以很轻松的做到。
    hoyixi
        10
    hoyixi  
       2019-07-04 17:06:01 +08:00
    没有路由?全靠 click 切换数据?
    owenliang
        11
    owenliang  
       2019-07-04 17:52:06 +08:00
    全局共享的放在 HOC 里获取然后存到 store 中,个别组件自己的那就是组件去获取后再保存到 store 中。
    Hoshinokozo
        12
    Hoshinokozo  
       2019-07-04 18:21:59 +08:00
    vue 是单向数据流,所以父子都需要用的数据放在父组件,通过 props 传给子组件,子组件内部的数据就放在子组件,
    子组件之间共享的数据要么放在共同的父组件,要么放在 vuex
    nbin2008
        13
    nbin2008  
       2019-07-04 18:23:56 +08:00
    不知道放哪里 && 多个地方要用,store 你值得拥有
    KuroNekoFan
        14
    KuroNekoFan  
       2019-07-04 18:25:28 +08:00   ❤️ 3
    这些都很难一概而论,引用 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.
    ```
    lamada
        15
    lamada  
       2019-07-04 18:46:52 +08:00
    状态与渲染分离
    powerN
        16
    powerN  
       2019-07-04 18:55:09 +08:00 via iPhone
    index
    wu67
        17
    wu67  
       2019-07-04 20:26:05 +08:00
    谁的数据谁请求, 共用的就 vuex
    qiushenqinghua
        18
    qiushenqinghua  
       2019-07-04 23:00:03 +08:00
    side 只获取自己的数据就在组件本身里放数据,search 搜索结果跨组件给 list。
    用 vuex 统一管理更直接一点,不会错,后面加什么都比较统一。
    linZ
        19
    linZ  
       2019-07-04 23:54:43 +08:00
    @bhaltair vuex 最后会炸掉的。。
    spark
        20
    spark  
       2019-07-05 00:58:01 +08:00
    推荐读一下这个:[Thinking in React]( https://reactjs.org/docs/thinking-in-react.html)
    molvqingtai
        21
    molvqingtai  
       2019-07-05 01:00:24 +08:00 via Android
    和楼主差不多,父组建获取数据传给子组建渲染,有时候参数太绕的话,就直接在子组建请求数据了
    wengjin456123
        22
    wengjin456123  
       2019-07-05 03:42:15 +08:00 via Android   ❤️ 1
    需要共享的放 vuex,其他的最好在组件内部
    icebreaker12
        23
    icebreaker12  
       2019-07-05 09:54:54 +08:00
    千万别把数据全放 vuex,为了用而用,等别人接手看到会炸掉
    santom
        24
    santom  
       2019-07-05 10:08:42 +08:00
    单组件数据放本组件就好。 尽量不要一股脑 vuex。。。
    tikazyq
        25
    tikazyq  
       2019-07-05 17:31:19 +08:00
    每一个组件有自己的 request 层
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1278 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:36 · PVG 02:36 · LAX 11:36 · JFK 14:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.