vue的mixin真的是写公共js神器！之前写项目，遇到公共函数，都专门创一个文件，然后把公共函数写进去，通过main.js进行引入挂载，这样没问题，但是想要改data里的数据或者使用axios获取数据就麻烦无比。而mixin是混入，也就是说把公共函数混进到每个页面，这样公共函数能直接修改data里的数据了和使用axios获取数据。

浅谈vue的mixin

使用场景

比如你a页面有一个下拉选，下拉选数据a通过ajax获得，你b页面有一个下拉选，下拉选数据b通过ajax获得。虽然两页面ajax、数据不一样，但获取到的内容都放在this.option变量里。代码如下：
a.vue

getOption(){
    this.$axios.post(
        '/api/aaaaaa'
    ).then((response)=>{
        this.option = response.data
    })
},

b.vue

getOption(){
    this.$axios.post(
        '/api/bbbbbb'
    ).then((response)=>{
        this.option = response.data
    })
},

这个情况下就能将这个函数写入mixin。
 

如何使用

1、和main.js同级创建mixin文件夹，文件夹里创建baseMixin.js文件。

2、把相同代码或相似代码段写入，以上面例子为例：

const getOptionData = {
    data() {
        return {
            option: [], // 下拉选数据
        }
    },
    methods: {
        // 获取下拉选数据
        getOption(ajaxString){
            this.$axios.post(
                ajaxString
            ).then((response)=>{
                this.option = response.data
            })
        },
    },
}
// 导出名为getOptionData，引入时要注意同名哦
export default getOptionData;

3、页面导入和使用mixin。
全局导入：

// 在main.js里加入：
Vue.mixin(getOptionData)

单页面导入：

<script>
// 单页面引入mixin
import getOptionData from '@/mixin/baseMixin.js'
export default {
    // 使用mixin
    mixins: [getOptionData],
    mounted(){
        // 调用mixin里getOption函数
        this.getOption('/api/xxxxxx')
    },
}
</script>

 

更多用法请看官方文档

vue2：混入 (mixin)
vue3：混入 (mixin)