V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
guorui112
V2EX  ›  问与答

vuex 里面放置接口问题

  •  
  •   guorui112 · 2019-11-18 11:44:04 +08:00 · 833 次点击
    这是一个创建于 1593 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在写某些列表刷新的时候,遇到了一些同步刷新的问题

    a 页面:展示一个列表数据,只展示目前最新的前 5 条消息,不可翻页 b 页面:也是一个列表,在加载的时候展示 10 条信息,上拉触底后拉取新的数据 c 页面:列表详情页,在操作完之后刷新 a 页面和 b 页面的数据,我目前一直是 onshow 里面调用刷新的,然后因为每次展开详情页后,不管有没有操作,都需要刷新,出现一个加载的 loading 图标,感觉体验很不好,在小程序中也遇到的同样的问题,onshow 会每次都刷新,如果用页面之间的事件传递,也很麻烦(小程序中想用 redux ), 目前有想法是在 vuex 同步一下状态,统一更新关于这些消息的列表,但是具体实现上很迷茫,比方说,如何放置数据,是分 3 个对象去接受 a b c 的数据,还是统一一个列表去接收,还有接口之类的放在 store 哪里

    1 条回复    2019-11-18 14:20:01 +08:00
    redbuck
        1
    redbuck  
       2019-11-18 14:20:01 +08:00   ❤️ 1
    接口专门建一个文件统一放置.比如 api.js

    store 里只建一个 list 存数据.一个 flag 决定是否清空数据.一个查询对象 query,包含 pageIndex 等
    它负责获得 dispatch 后用 api 去拉取数据.如果数据存在就直接返回成功.如果 flag 要清空数据就重置 query,清空 list

    a 页面,派发一个 dispatch 获取一页数据.
    b 页面,不断派发 dispatch 获取多页数据.
    c 页面,操作结束设置 flag

    页面利用 getters 或者页面本身的 computed 去动态展示 list 里对应的数据.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5458 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 07:40 · PVG 15:40 · LAX 00:40 · JFK 03:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.