javascript - Problèmes de réutilisation utilisant les composants Mixin dans Vue

Question

Décrivez brièvement le scénario. Par exemple, a.component et b.component utiliseront le code suivant,

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();
        }
    }
}

Après avoir utilisé ce code, les deux composants demandent des URL différentes lorsqu'ils ne font que communiquer. Comment utiliser la réutilisation mixin s'il vous plaît donnez-moi quelques conseils~

Answer 1

La seule différence que vous avez est l'URL. Ensuite, vous pouvez simplement définir l'URL comme attribut de données. Ajoutez l'URL de l'attribut de données à votre mixin, puis définissez l'URL dans les composants a et b respectivement, ce qui écrasera l'URL dans. le mixin, comme suit :

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 est défini de la même manière que a

Answer 2

Mettez le code répété dans mixin.js et écrivez la initList() non dupliquée dans chaque composant séparément

Answer 3

Ce à quoi je pense maintenant, c'est

initList () {
    let url = ''
    // 这个地方写个判断
    if (条件a){
        url = ...
    } else {
        url = ...
    }
    axios({
        url: url,
        data: {}
    })
}

Pas besoin de changer quoi que ce soit d'autre. Quant à juger comment écrire, écrivez-le simplement vous-même en fonction de la différence entre les deux pages.