vue中使用mixin组件复用问题

Question

简单描述下场景，比如a.component，b.component均会使用到如下代码，import axios from 'axios';export default(){    data(){        return {            initList: [],            pageSize: 10,            pageNo: 1        }    },    created(){        this.initList();    },    methods: {        initList(){            axios({                url: '/list1',                data: {}            })            .then(res => res.data)            .then(data => {                this.initList = data;            })        },        pageSizeChange(size){            this.pageSize = size;            this.initList();        },        pageNoChange(pageNo){            this.pageNo = pageNo;            this.initList();        }    }}两个组件在使用该段代码的时候之后，只用通信的时候请求的url不一样，怎么使用mixin复用，菜狗求指点~

Answer 1

你唯一不同的是url，那么你把url作为data属性定义不就行了，你的mixin添加data属性url，然后在a,b组件中分别定义url，就会覆盖mixin中的url，如下：

mixin:

import axios from 'axios';

export default(){

    data(){

        return {

            url: '', // 看这里！

            initList: [],

            pageSize: 10,

            pageNo: 1

        }

    },

    created(){

        this.initList();

    },

    methods: {

        initList(){

            let url = this.url;

            axios({

                url: url,

                data: {}

            })

            .then(res => res.data)

            .then(data => {

                this.initList = data;

            })

        },

        pageSizeChange(size){

            this.pageSize = size;

            this.initList();

        },

        pageNoChange(pageNo){

            this.pageNo = pageNo;

            this.initList();

        }

    }

}

a:

export default(){

    mixins: [引入mixin],

    data(){

        url: '这里是a中的url'

    }

}

b同a定义方式