vue 如何更好的设计一个公共的新增、编辑页面？

Question

如何更好的设计一个公共的新增、编辑页面？
需求如下：假设有一个新增、编辑功能，在很多页面都需要能够点击按钮，调用公共的添加页面，这个时候，我想到的办法是，通过按需加载的方式，把添加页面放到 app.vue 里面，然后配合vuex，设计一个数字变量，在需要触发弹框的页面，使这个变量+1，然后再app.vue监听这个数字的变化，如果变化，则调用弹框，

请问这一块是否有更好的实现思路？

问题二：
如果这种业务场景非常多，那么我希望把 import xxxxDialog from './xxxxDialog' 组件语句，使用组件代码

<xxxxDialog :isShow='isShow'></xxxxDialog>

以及所有的相关变量，都放到指定的单独文件里面，从而是代码更整洁，请问该如何实现？

目前只能想到把 变量、相关函数 放到单独的文件，比如xxxxDialogMixins.js，但是导入语句，是使用组件代码无法独立出来。

Answer 1

为啥要封装一个公共的新增/编辑页面？表单的编辑本来就是不同功能模块里面的内容不一样啊……怎么公用啊？

如果你希望把 import xxxDialog from './xxxDialog' 这样的导入语句省略掉，可以考虑用 unplugin-vue-components 这个依赖，配置好规则之后就可以自动引入你项目内的插件了。直接可以在模板块里面写 <xxxDialog /> 来使用，手脚架会自动帮你引入对应的自定义组件。

---

说个题外话，就是你把组件导入和组件使用都放到一个单独的文件里面，那你业务功能页面里面怎么去使用，用你开头想法中挂载在全局的Dialog？那么如果遇到表单有客制化怎么办？
以及除了你之外其他的开发组同事怎么知道有这个全局组件可以用。

为啥 Vue3 不在推荐 Mixins 来作为组件间的逻辑复用。就是因为很多东西在外部定义好，在当前组件使用 Mixins 混入之后使用的过程中，除了你之外，其他的人是不知道很多的变量、函数是从哪里来的。也不知道有哪些已经声明好的变量和函数，会增加很多其他的困扰。

不再推荐

在 Vue 2 中，mixins 是创建可重用组件逻辑的主要方式。尽管在 Vue 3 中保留了 mixins 支持，但对于组件间的逻辑复用，使用组合式 API 的组合式函数是现在更推荐的方式。
#mixins - 组合选项 | Vue.js

---

如果你想省略很多东西，可以考虑函数组件使用 createRenderer() 函数挂载在body上面。这样是需要在需要使用的页面上面 import 对应的表单编辑弹窗函数就好了，如果有客制化也可以使用 jsx 去传入自定义模板。

我是不认可把表单弹窗挂在全局的这种使用想法的，有太多太多不合适的理由。与之相似的还有自己基于UI库二次封装一个类似 form-generator 这种的自定义表单/Table组件，期望使用 prop 传入一个 json 树不写 template 来实现很多功能的需求。

Answer 2

对于问题一：直接在pinia或者vuex中设计一个布尔类型的变量，比如isshow，在app.vue或者某个顶层组件中引入弹框组件和isshow，不需要再绕弯子监听数字的变化。
对于问题二：完全没必要把导入语句也和组件逻辑封装在一起。