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

vue3: 请教下 nested json config 怎么制作 reactive 前端 UI 呢?

  •  
  •   nowheremanx · 233 天前 · 932 次点击
    这是一个创建于 233 天前的主题,其中的信息可能已经有所发展或是发生改变。
    用的工具是 element plus 作为前端 UI 库,pinia 作为 store 。

    如果是简单的一对一的 form ,用 vue 写起来很简单。但是遇到 nested 的 config 就力不从心了。请注意,这个 nested 是 dynamic 的,本质上属于一个 tree 。

    举一个例子,就是男女相亲大聚会,参与者可以选择 A 类型桌:"男 A 女免",B 类型桌:"女 A 男免",C 类型桌:"所有人 AA"。当然了,每种类型的桌意味着不同的游戏和酒水,也是各自 config 的一部分。除此之外,这些桌可以选择不同的包间,比如两张 A 桌共享包间 888 , 一张 A 桌一张 B 桌共享包间 666 。因为是 nested ,我们还要允许小包间里再加小包间。

    我最后要作为经理去计算每个人的收费。比如总花费 10000 元,我要按照比例计算每个人的收费。

    聚会 10000
    / | \
    包间 666(20%) 包间 888(20%) 包间 618(60%)
    | | / \
    A 桌(大壮,小红...) B 桌(杰克,肉丝...) 包间 618-1(60%) 包间 618-2(40%)
    / \ / \
    A B B B


    我目前的方案没有用到 store ,直接是 v-model 然后通过 props 和 emit 来传递,但是层层传递显得非常复杂,而且我在各种 A 桌模块,B 桌模块,包间模块里写了一些逻辑来初始化 UI ,散乱不好打理。从头开始创建 config 很简单,但是我现在如果保存了 config ,再载入,我不确定是否能完美复现 UI 。

    所以现在想要用 store 来作为数据中心,写个 class 来处理逻辑操作,而 vue 文件就管显示和与 store 的数据交互。一个 config json 确定一个 UI state 。

    但是层层叠叠的数据,想要 reactive 挺难的,现在想着 flatten 成键值对,然后通过逻辑代码来操作真正的数据。但是怎么想都想不通。


    后端写前端,说多了都是泪,有没有大侠帮忙看看?谢谢了
    6 条回复    2023-10-24 14:19:38 +08:00
    sjhhjx0122
        1
    sjhhjx0122  
       233 天前
    不用 store,就依赖注入呗
    leokun
        2
    leokun  
       233 天前
    不明白你的 nested json 是一种什么样的结构,不过看你的最终目的是 n 个 nested 组合成一个响应式的对象,将原始的 nested 包装成 reactive 后,再用 computed 代理出一层新的对象,这个对象的结构就对应 UI 就比较好处理了
    nowheremanx
        3
    nowheremanx  
    OP
       233 天前 via iPhone
    @sjhhjx0122 请问什么是依赖注入?
    nowheremanx
        4
    nowheremanx  
    OP
       233 天前 via iPhone
    @leokun 最大的问题是无限“包间”,包间里面还能有小包间。 如果我限制不能在包间里继续添加标间,那么就容易多了。

    这个问题也是对我前端能力的一点挑战,所以在这里问一问。
    sjhhjx0122
        5
    sjhhjx0122  
       233 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5531 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 06:30 · PVG 14:30 · LAX 23:30 · JFK 02:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.