vue2-mixins

在 Vue.js 中使用Mixin —— CSS-Tricks
http://zcfy.cc/article/using-mixins-in-vue-js-css-tricks-3257.html

有一种很常见的情况：有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？
两种解决方案都不够完美：如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。反之，太多的props传值会很快变得混乱不堪，从而迫使维护者（即便这个人是你）在使用组件的时候必须理解一大段的上下文，拖慢写码速度。
使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解（引自 Michael Feathers ）。Mixin允许你封装一块在应用的其他组件中都可以使用的函数。如果使用姿势得当，他们不会改变函数作用域外部的任何东西，因此哪怕执行多次，只要是同样的输入你总是能得到一样的值，真的很强大！

例子

我们有一对不同的组件，它们的作用是通过切换状态（Boolean类型）来展示或者隐藏模态框或提示框。这些提示框和模态框除了功能相似以外，没有其他共同点：它们看起来不一样，用法不一样，但是逻辑一样。

Modal.vue（未抽离逻辑）

<template>
    <div>
        <h3>Let's trigger this here modal!</h3>
        <button @click="toggleShow">
            <span v-if="isShowing">Hide child</span>
            <span v-else>Show child</span>
        </button>
        <app-child v-if="isShowing" class="modal">
            <button @click="toggleShow">Close</button>
        </app-child>
    </div>
</template>

<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";

export default {
    name: "Modal",
    mixins: [ toggle ],
    data() {
        return {
            isShowing: false
        }
    },

    methods: {
        toggleShow() {
            this.isShowing = !this.isShowing;
        }
    },

    components: {
        appChild: Child
    }
}
</script>

Tooltip.vue（未抽离逻辑）

<template>
    <div class="tooltip-demo">
        <h3 @click="toggleShow">
            <span v-if="isShowing">Click Me Again</span>
            <span v-else>Click Me Please</span>
        </h3>
        <app-child v-if="isShowing" class="tooltip">
            <p>I'm a tooltip this time</p>
        </app-child>
    </div>
</template>

<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";

export default {
    name: "Tooltip",
    mixins: [ toggle ],
    data() {
        return {
            isShowing: false
        }
    },

    methods: {
        toggleShow() {
            this.isShowing = !this.isShowing;
        }
    },

    components: {
        appChild: Child
    }
}
</script>

重要：我们可以在这里提取逻辑并创建可以被重用的项：

toggle.js

export const toggle = {
    data() {
        return {
            isShowing: false
        }
    },

    methods: {
        toggleShow() {
            this.isShowing = !this.isShowing;
        }
    }
}

Modal.vue

<template>
    <div>
        <h3>Let's trigger this here modal!</h3>
        <button @click="toggleShow">
            <span v-if="isShowing">Hide child</span>
            <span v-else>Show child</span>
        </button>
        <app-child v-if="isShowing" class="modal">
            <button @click="toggleShow">Close</button>
        </app-child>
    </div>
</template>

<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";

export default {
    name: "Modal",
    mixins: [ toggle ],
    components: {
        appChild: Child
    }
}
</script>

Tooltip.vue

<template>
    <div class="tooltip-demo">
        <h3 @click="toggleShow">
            <span v-if="isShowing">Click Me Again</span>
            <span v-else>Click Me Please</span>
        </h3>
        <app-child v-if="isShowing" class="tooltip">
            <p>I'm a tooltip this time</p>
        </app-child>
    </div>
</template>

<script>
import Child from "./Child";
import { toggle } from "./mixins/toggle";

export default {
    name: "Tooltip",
    mixins: [ toggle ],
    components: {
        appChild: Child
    }
}
</script>