VueJS 2 应用程序中数据传递的工作流程答案

【问题标题】：Work process for data passing in VueJS 2 applicationVueJS 2 应用程序中数据传递的工作流程
【发布时间】：2019-06-25 11:11:37
【问题描述】：

我对 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>

对我来说，似乎有很多数据从一个组件传递到另一个组件。我将它从文件显示组件（显示所有上传的文件）传递到图表页面，然后将其传递给图表组件。

另一个问题是，如果我在图表页面上，并且我刷新页面，那么图表不再具有文件名属性，因此图表不会呈现。我将如何处理这个情况？

任何建议表示赞赏

【问题讨论】：

这个流程对我来说看起来很典型，并且对于保持组件模块化是必要的。我有一个建议是pass your route params as props。这减少了在 created 挂钩中获取参数的需要。
谢谢，将实现道具而不是参数。你对页面刷新丢失道具有什么建议吗？我看过有关实现本地存储的讨论，不确定这是最佳选择吗？
我很确定页面刷新问题将通过制作路由参数道具来解决。

标签： vue.js vuejs2 vue-component

【解决方案1】：

您在刷新时丢失图表的原因是由于使用了 created 方法。

在您的图表组件中删除整个创建的方法并直接在您的条形图参考中引用路由参数，如下所示：

<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>

【讨论】：

我试过了，但页面刷新时仍然丢失数据
您的文件名是什么样的？您是否考虑将其添加到网址中？我可以发布一个在路由器中使用路径参数的示例。这样可以更好地管理状态，并且可以复制和粘贴 url，例如发送电子邮件等...
我在 Laravel 中使用它，所以文件名是存储文件夹的路径，例如存储/用户/文件名.csv
您是否将其构建为 VueJS 中的单页应用程序？这真的越来越成为一个架构问题。如果您正在使用 laravel 路由器为 vue 提供服务，我建议您通读 vuejs.org/v2/guide/ssr.html 如果您使用的是 Vue 的路由器，也许您可以使用动态路由变量 (router.vuejs.org/guide/essentials/dynamic-matching.html) 而不是参数来提供文件名的 ID 或 slug。希望这会有所帮助！

【解决方案2】：

您可能需要查看vuex 来管理从父级传递到某个深度嵌套的子级的数据。

在您决定要将文件持久保存在嵌套组件中之前，您可能需要考虑这是否是好的用户体验（当用户刷新页面时，他们上传的旧文件是否有意义？仍然缓存？）您可以考虑使用localStorage 在本地存储内容，以便在刷新时，数据仍然存在，而无需用户重新输入。

【讨论】：