Условная загрузка больших json файлов с помощью ax ios .get - PullRequest
Новая
       5

Условная загрузка больших json файлов с помощью ax ios .get

0 голосов
/ 18 июня 2020

Большой файл json извлекается следующим образом. Однако он работает должным образом, поскольку case_data. json имеет большой размер, отображение страницы занимает до двух минут. 

export default {
    name: "cases",
    data() {
        return {
            columns: ['Case number', 'Summary', 'Name', 'Address'],
            cases: []
        };
    },
    methods: {
        fetchData(){
                axios.get('/case_data.json').then(response => {
                this.cases = response.data;
            })
        }
    },
    created(){
        this.fetchData();
    }
};

Он содержит случаи за несколько месяцев, поэтому идея состоит в том, чтобы разбить его на ежедневные или еженедельные порции данных и импортировать только то, что требуется в данный момент. Ожидается повышение производительности. Я хотел бы передать входной параметр в fetchData () и загрузить меньший набор данных. Имеет ли смысл приведенный ниже подход? Код fetchData () правильный? 

export default {
    name: "cases",
    props: {
      day: {
          required: true,
          type: String
      }
    },
    data() {
        return {
            columns: ['Case number', 'Summary', 'Name', 'Address'],
            cases: []
        };
    },
    methods: {
        fetchData(this.day){
            if(this.day == 'day1') axios.get('/case_data_day1.json').then(response => {this.cases = response.data;})
            else if(this.day == 'day2') axios.get('/case_data_day2.json').then(response => {this.cases = response.data;})
            ... 
            else if(this.day == 'dayN') axios.get('/case_data_dayN.json').then(response => {this.cases = response.data;})
        }
    },
    created(){
        this.fetchData();
    }
};

1 Ответ

1 голос
/ 18 июня 2020

используйте вместо этого приведенный ниже код, его динамический c, вам не нужно писать вручную условие, и он будет извлекать данные на this.day и использовать fetchData() на установленном хуке. 

methods: {
    fetchData(){
          let that = this
          axios.get(`/case_data_${that.day}.json`).then(response => {that.cases = response.data;})
        }
    },
    mounted(){
        this.fetchData();
    }
...