一.Vue混入 ：局部混入 和 全局混入 詳情

二.uniapp中的混入
(1)局部混入：

• mixin.js文件

// 根目錄的static下創(chuàng)建js文件夾并創(chuàng)建mixin.js文件
import {api} from "./api.js"  //export 導(dǎo)出的api對象文件
export const mixin={
    data() {
        return {   
            api:api  //接口地址
        }
    },
    methods: {
        //封裝post調(diào)用接口的方法,
        post:function(url, params) {
            return new Promise((res, rej) => {
                uni.request({
                    url: this.$serverUrl + this.api[url], //$serverUrl 在main.js 設(shè)置主要的地址
                    data: params,
                    method: 'POST',
                    header: {
                        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                        'Authorization': `Bearer ${window.localStorage.getItem('app_token')}`
                    },
                    success: (data) => {
                        //成功執(zhí)行res
                        res(data)
                    },
                    fail: (err) => {
                        //失敗執(zhí)行rej
                        rej(err)
                    }
                })
            })
        }
    }
}

• 局部混入使用：在需要使用混入方法的文件中引入

<script>
//引入混入的文件
import {mixin} from "../../static/js/mixin.js"
export default {
    mixins:[mixin], //混入文件
    data() {
        return {
            pageForm: {
                user_name: '',
                password: ''
            }
        };
    },
    
    methods: {
        login:function(){
            //調(diào)用mixin 中的post 方法；具體可了解Promise方法
            this.post('login',this.pageForm).then(res=>{
                console.log(res)
                this.button=false
            }).catch(err=>{
                console.log(err)
            })
        }
    }
};
</script>

(2) 全局混入

• 1> 直接在main.js 文件中使用Vue.mixin方法

        Vue.mixin({
            data() {
                return {
                    api: api   //引入api文件
                }
            },
            methods: {
                //封裝post調(diào)用接口的方法,
                post: function(url, params) {
                    return new Promise((res, rej) => {
                        uni.request({
                            url: this.$serverUrl + this.api[url],
                            data: params,
                            method: 'POST',
                            header: {
                                "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                                'Authorization': `Bearer ${window.localStorage.getItem('app_token')}`
                            },
                            success: (data) => {
                                //成功執(zhí)行res
                                res(data)
                            },
                            fail: (err) => {
                                //失敗執(zhí)行rej
                                rej(err)
                            }
                        })
                    })
                },

            }
        })

• 2>或者在static/js 下創(chuàng)建mixin.js

export default {
   install(Vue) {
       Vue.mixin({
           data() {
               return {
                   api: api
               }
           },
           methods: {
               //封裝post調(diào)用接口的方法,
               post: function(url, params) {
                   return new Promise((res, rej) => {
                       uni.request({
                           url: this.$serverUrl + this.api[url],
                           data: params,
                           method: 'POST',
                           header: {
                               "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
                               'Authorization': `Bearer ${window.localStorage.getItem('app_token')}`
                           },
                           success: (data) => {
                               //成功執(zhí)行res
                               res(data)
                           },
                           fail: (err) => {
                               //失敗執(zhí)行rej
                               rej(err)
                           }
                       })
                   })
               },

           }
       })
   }
}

//在 main.js中引入使用
import mixin from "static/js/mixin.js"
Vue.use(mixin)