Vue 组件代码优化: 公共配置抽离成 Mixin 混合( 附超详细使用教程 )

前言

有过开发经验的同学都知道，为使代码层次结构清晰分明，对于一些通用或常用的方法，都会将其抽象成公共方法或配置供使用者调用。

例如：在做 Python 自动化测试过程中，经常需要连接数据库，进行增、删、改、查的操作。

add.py文件是给数据库添加数据的

update.py文件是更新数据库数据的

delete.py文件是删除某个条件下的数据库数据的

后期可能在 add.py 文件中增加本次添加的数据进行删除的操作，这种情况下你觉得把数据库配置及操作代码写在哪合适呢？

1.add.py,update.py,delete.py 每个文件里各写一套数据库的配置与操作

2.单独写一个public.py文件，将数据库的配置及操作提取出来，哪个文件要用则引入即可使用

如果是我肯定选择第 2 种方式，既不需要重复写相同代码，同时也让整个代码框架看起来更清晰，消除了不必要的冗余。

Vue 多组件之间也会有使用相同配置或方法的场景，这时也可以选择第 2 种方法。

将公共的配置信息或方法抽离到 mixin 混合中，哪个 Vue 组件想要使用引入即可。

Mixin 使用场景

:::: column
::: column-left

Home.vue组件

:::
::: column-right

City.vue组件

:::
::::

由上图红框标注对比可知，两个组件都使用到 methods 中的 showAlert 方法，此时就可以将该方法抽离到 mixin.js文件中

然后在 Home.vue,City.vue组件中分别局部引入或直接在main.js中全局引入即可使用。

代码实战

定义混合

创建一个mixin.js文件，内容如下：

//定义一个名字为：mixin 的混合并暴露出来，这个混合的名字 mixin 可以自定义，非固定值 mixin。
export const mixin = {
   
    methods: {
   
        showAlert(){
   
            alert(this.name