如果是简单的一对一的 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 。