Vue mixins(混入)的使用

一、什么是mixins（混入）

个人认为，对于JS讲，简单来说就是合并一个对象。

二、如何使用

// mixin
export default {
    data () {
        return {
            show: false,
            user: {
                name: '小仙女',
                age: 18,
                weight: '48KG'
            }
        }
    },
    methods: {
        onClick () {
            alert(this.user.name);
        }
    }
}

// demo页面
/*
<template>
    <div style="padding: 20px">
        <p>
            姓名: {{user.name}}
        </p>
        <template v-if="show">
            <p>
                年龄: {{user.age}}
            </p>
            <p>
                体重: {{user.weight}}
            </p>
        </template>
        <Button @click="onClick">请点击我吧～～～</Button>
    </div>
</template>

<script>
    import mixin from './mixin';
    export default {
        name: "demo",
        components: {},
        mixins: [mixin],
        data () {
            return {}
        },
        methods: {}
    }
</script>

<style scoped>

</style>
*/

使用的方式大致如上。mixin中不仅可以放属性和方法，也可以其他的东西，比如：计算属性、生命周期函数、过滤器等。使用mixns需要注意以下两点

1. 相同的属性、方法、计算属性、过滤器等，以组件的为先。
2. 组件和mixin存在相同的生命周期函数，mixins里面的优先执行

在mixin里面新增created，在demo中新增show属性，新增created及onClick方法

// mixins
...
    created () {
        console.log('我是mixins');
    }
...

...
    data () {
        return {
            show: true,
        }
    },
    methods: {
        onClick () {
            alert(this.user.weight);
        }
    },
    created () {
        console.log('我是demo');
    }
...

三、项目开发中使用Vue可以做的处理

1. 封装通用的过滤器及方法

export default {
    filters: {
        // 年月日格式化
        dateFormat (value) {
            if (!value) return '';
            return new Date(value).format('yyyy-MM-dd');
        },
        // 年月日时间格式化
        dateTimeFormat (value) {
            if (!value) return '';
            return new Date(value).format('yyyy-MM-dd hh:mm:ss');
        },
    }
}

2. 利用data和mixins初始化部分数据

export default {
    data () {
        return {
            gModuleApi: [],
        }
    },
    computed: {
        api () {
            let api = {};
            if (typeof this.gModuleApi === 'string') {
                return getApi(this.gModuleApi);
            } else if (Array.isArray(this.gModuleApi)) {
                this.gModuleApi.forEach(module => {
                    api = {
                        ...api,
                        ...getApi(this.$api, module),
                    }
                });
            }
            return api;
        }
    },
}

3. 封装相同的属性和方法

以上是个人的见解，肯定有拙劣的地方，望各位大佬轻点。