V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
firhome
V2EX  ›  程序员

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

  •  
  •   firhome · Jul 4, 2019 · 5579 views
    This topic created in 2498 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 ) 获取新数据(传递到各子组件)。。。

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