Рабочий процесс для передачи данных в приложении VueJS 2 - PullRequest
Новая
       8

Рабочий процесс для передачи данных в приложении VueJS 2

0 голосов
/ 01 февраля 2019

Я довольно новичок в VueJS 2, поэтому хотел посмотреть, правильно ли я работаю.У меня есть система, где кто-то загружает файл, содержащий данные, которые затем будут использоваться для создания диаграмм.Поэтому я отображаю загруженные файлы для них 

<tr v-for="file in files.data" :key="file.id">
     //file information
     <td>
         <router-link :to="{ name: file.chart, params: { fileName: file.name }}" 
                tag="a" exact> View Results
         </router-link>
     </td>
</tr>

Итак, вы можете видеть, что у меня есть ссылка в таблице, которая направляет их на страницу диаграммы для файла, который они загрузили.Он включает параметры для имени файла, который нужно загрузить.

На странице диаграммы я получаю параметры в созданном методе.Затем я передаю их компоненту для отображения диаграммы 

<template>
    <div>
       //some information
        <div class="row">
            <div class="col-12" id="parentDiv">
                <barchart :file-name = this.fileName></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Barchart from '../charts/Barchart';
    export default {
        components: {
            'barchart': Barchart
        },
        data() {
            return {
                fileName: ''
            }
        },
        created() {
            this.fileName = this.$route.params.fileName;
        }
    }
</script>

Наконец, у меня есть компонент Barchart.Это то, что создает диаграмму на основе загруженных в файл данных. 

<script>
    import * as d3 from 'd3';

    export default {
        props: {
            fileName: {
                type: String,
                required: true
            }
        },
        methods: {
            createBarChart() {
              //d3 to create chart using the file that was uploaded
            } 
        },
        created() {
            let vm = this;
            d3.json('storage/' + this.fileName)
                .then(function (data) {
                    vm.createBarChart(data);
                }).catch(function (error) {
                // handle error
            });
        }
    };
</script>

Мне кажется, что происходит много передачи данных от одного компонента к другому.Я передаю его из компонента отображения файлов (который отображает все загруженные файлы), затем на страницу диаграммы, которая затем передает ее компоненту диаграммы.

Другая проблема заключается в том, что если я нахожусь на диаграммахстраница, и я обновляю страницу, тогда у диаграммы больше нет имени файла и, следовательно, диаграмма не отображается.Как бы я справился с этой ситуацией?

Любой совет приветствуется

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Возможно, вы захотите заглянуть в vuex , чтобы управлять передачей данных от родителя к некоторому глубоко вложенному дочернему элементу.

Прежде чем вы решите сохранить файл во вложенном компоненте, вывозможно, стоит подумать, хорош ли это UX ( имеет ли смысл, что когда пользователь обновляет страницу, старый загруженный файл все еще кэшируется? ) Вы можете посмотреть, используя localStorage для локального хранения данных, чтобы при обновлении данные оставались там без необходимости повторного ввода пользователем.

0 голосов
/ 01 февраля 2019

Причина, по которой вы теряете диаграмму при обновлении, связана с использованием созданного метода.

В компоненте диаграммы удалите весь созданный метод и создайте ссылку на параметр маршрута непосредственно в ссылке на диаграмму, напримеритак: 

<template>
    <div>
       //some information
        <div class="row">
            <div class="col-12" id="parentDiv">
                <barchart :file-name="$route.params.fileName"></barchart>
            </div>
        </div>
    </div>
</template>

<script>
    import Barchart from '../charts/Barchart';
    export default {
        components: {
            'barchart': Barchart
        },
        data() {
            return {

            }
        }
    }
</script>
...