yo!vue mixin的两种使用场景 | 8月更文挑战

第一种场景，用于代码复用

这种也是应用比较广泛的场景，以一个实例说明该场景的使用：

上图中对素材的操作，出现在多个组件中，这种情况下，我们就可以把对素材的操作封装成一个mixin,然后在用到的组件中引入，调用对应的方法即可。 代码如下：

export const MaterialOpMixin = {
    methods: {
        mixDel() {
            // 删除素材
        },
        mixLock() {
            // 锁定素材
        },
        mixReplace() {
            // 替换素材
        },
    },
}

为了防止函数名冲突，我习惯的编码方式是mixin中的方法加个前缀mix

在用到的组件中，引入该mixin，并调用对应的方法即可，代码如下：

<template>
    <section>
        <edit-element @replace="mixReplace"></edit-element>
    </section>
</template>

<script>
import { MaterialOpMixin } from './material-operation'
export default {
    name: 'mixinTest',
    mixins: [MaterialOpMixin],
    data() {
        return {}
    },
    computed: {},
    methods: {},
    created() {},
}
</script>

以上这种使用mixin的方法主要是为了代码复用，接下来介绍第二种场景

第二种场景 逻辑分离

第二种场景是我个人比较习惯的一种分离代码的方式，使用场景如下：

假如我要写一个编辑器页面，父组件Edit.vue,编辑器中主要有三个模块，资源加载模块，素材操作模块和生成预览模块，每个模块我都封装了对应的组件，每个模块的组件和父组件的交互逻辑比较多，如果都写在一起，Edit.vue文件就会特别长，为了分离代码，我选择把父组件与各个模块的交互逻辑分别搞到不同的mixin中去。

代码目录结构如下：

.
├── Edit.vue
└── controller
    ├── generate.js
    ├── index.js
    ├── material.js
    └── resource.js

资源加载模块：

export const resource = {
    methods: {
        mixLoadResource() {
            // 加载资源
            console.log('load resource')
        },
        mixSetState() {
            // 设置页面状态
        },
    },
}

素材模块

export const material = {
    methods: {
        mixAdd() {
            //添加
        },
        mixDel() {
            //删除
        },
        mixReplace() {
            //替换
        },
    },
}

生成预览模块

export const generate = {
    methods: {
        mixSave() {
            // 保存任务
        },
        mixRun() {
            // 合成任务
        },
        mixPreview() {
            //预览
        },
    },
}

最后Edit.vue引入所有的模块

<template>
    <section></section>
</template>

<script>
import { generate, material, resource } from './controller/index'
export default {
    name: 'Edit',
    mixins: [generate, material, resource],
    data() {
        return {}
    },
    computed: {},
    methods: {},
    created() {
        this.mixLoadResource()
    },
}
</script>

<style lang="less" scoped></style>

这种组织代码的方式是有弊端的，主要是没有显示引入对应的方法，在Edit.vue中调用对应方法时没有代码提示，只是写出来提供一种思路。

最终还是推荐大家使用vue3的新语法来组织代码。