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

[nowheremanx]

用的工具是 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 成键值对，然后通过逻辑代码来操作真正的数据。但是怎么想都想不通。


后端写前端，说多了都是泪，有没有大侠帮忙看看？谢谢了

[sjhhjx0122]

不用 store,就依赖注入呗

[leokun]

不明白你的 nested json 是一种什么样的结构，不过看你的最终目的是 n 个 nested 组合成一个响应式的对象，将原始的 nested 包装成 reactive 后，再用 computed 代理出一层新的对象，这个对象的结构就对应 UI 就比较好处理了

[nowheremanx]

@sjhhjx0122 请问什么是依赖注入？

[nowheremanx]

@leokun 最大的问题是无限“包间”，包间里面还能有小包间。 如果我限制不能在包间里继续添加标间，那么就容易多了。

这个问题也是对我前端能力的一点挑战，所以在这里问一问。

[sjhhjx0122]

@nowheremanx 跟后端的概念一样的,不过你可以看看 vue 的官方示例,https://cn.vuejs.org/guide/components/provide-inject.html,正好能解决你的层级传参响应问题

[sjhhjx0122]

@nowheremanx https://cn.vuejs.org/guide/components/provide-inject.html
地址是这个