V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
taofoo
V2EX  ›  Vue.js

咨询一个 vue,组件的问题

  •  1
     
  •   taofoo · 2021-11-17 21:22:52 +08:00 · 2041 次点击
    这是一个创建于 1106 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自己是个后端,最近学了下 vue 。遇到个问题不知道怎么解决。 现在有一个列表用来展示 notes 。

    组件结构如下:

    HomePage => NoteList => NoteItem
    

    之前写的时候不是很熟悉没有太注意,在 NoteItem 中直接使用了公共状态( pinia 的 Store ),并且 NoteItem 的一些操作,比如编辑 删除都是直接操作 store 。直接导致从 NoteList 到 NoteItem 与 store ,getAllNoteApi(全量 note 的接口)耦合在一起。现在想加一个标签功能,就要求展示某个标签下的所有 note,但是整个 List 已经与 getAllNoteApi 耦合在一起。

    应该是自己的方法用错了。不知道正确的实现方式是什么呢?

    第 1 条附言  ·  2021-11-17 22:48:39 +08:00

    I5jSHJ.png

    7 条回复    2021-11-18 10:54:59 +08:00
    taofoo
        1
    taofoo  
    OP
       2021-11-17 21:32:19 +08:00
    lalalaqwer
        2
    lalalaqwer  
       2021-11-17 23:08:04 +08:00
    按指定的某个标签展示的话直接渲染的时候用条件渲染就可以了
    gadfly3173
        3
    gadfly3173  
       2021-11-17 23:14:29 +08:00 via Android
    api 其实没啥必要走状态管理,单独的 model 类去请求就好了吧
    taofoo
        4
    taofoo  
    OP
       2021-11-18 00:10:27 +08:00
    @lalalaqwer 过滤的话,每次请求都会筛掉一部分。数量变得不可控,而且既然要被筛掉就没有请求的必要,所以想着搞个单独的 api,但是现在的问题是,notelist 写死了全量的 api.这让 notelist 不能很好的复用
    taofoo
        5
    taofoo  
    OP
       2021-11-18 00:15:26 +08:00
    @gadfly3173 notelist 其实有个触底加载 loadmore 的逻辑在里面(就在这里写死了全量的 api),想把这部分抽出来。但是 notelist 作为组件不知道有什么好方法能够把这部分逻辑抽离出来
    shikuinb
        6
    shikuinb  
       2021-11-18 10:23:47 +08:00
    在接口层面做过滤吧
    fxosleeping
        7
    fxosleeping  
       2021-11-18 10:54:59 +08:00
    noteitem 的编辑删除 emit 到 notelist ,noteitem 跟 store 的操作移到 notelist ,接口过滤标签就好了,改动不算大吧,如果 note 的数据只是在这个页面用到,没必要放公共的 store
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1042 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 21:43 · PVG 05:43 · LAX 13:43 · JFK 16:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.