javascript - Guna semula isu menggunakan komponen mixin dalam vue

Question

Terangkan secara ringkas senario Contohnya, a.component dan b.component akan menggunakan kod berikut,

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

Selepas menggunakan kod ini, kedua-dua komponen meminta URL yang berbeza apabila mereka hanya berkomunikasi

Answer 1

Satu-satunya perbezaan yang anda ada ialah url Kemudian anda boleh mentakrifkan url sebagai atribut data Tambahkan url atribut data pada mixin anda, dan kemudian tentukan url dalam komponen a dan b, yang akan menimpa url dalam. mixin, seperti berikut:

campuran:

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 ditakrifkan dengan cara yang sama seperti a

Answer 2

Masukkan kod berulang ke dalam mixin.js, dan tulis initList() yang tidak diduplikasi dalam setiap komponen secara berasingan

Answer 3

Apa yang saya fikirkan sekarang ialah

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

Tidak perlu mengubah apa-apa lagi untuk menilai cara menulis, tulis sendiri berdasarkan perbezaan antara dua muka surat.