时间戳

首页 > 解决方案 > 使来自 App.vue 的 JSON 数据在所有视图中都可访问

json - 使来自 App.vue 的 JSON 数据在所有视图中都可访问

问题描述

到目前为止，我的 Vue3 SSA 包含以下文件：
App.vue
views/Home
views/Page_A
views/Page_B

在 App.vue 中，通过 API 加载 JSON 文件。主页和页面 A 和 B 上都需要数据。
使用以下代码，我从 API 加载数据，如果在每个视图文件中分别完成，我可以在相应的模板中使用它。

<script>
import axios from "axios";

export default {
    name: "RenderList",
    props: {
        msg: String,
    },
    data() {
        return {
            listDataString: String,
            listData: [], // placeholder
        };
    },
    mounted() {
        axios
            .get('https://www.dev.domain.de/wp/wp7/all_json/?maxCounts=20&order=DESC')
            .then((response) => {
                this.listDataString = JSON.stringify(response.data, null, "\t");
                this.listData = response.data;
                console.log(this.listData);
                return response; // multiline arrow function must return
            });
    },
};
</script>

但由于 API 数据不会更改，因此只需在 App.vue 中加载一次，然后使其可用于视图文件即可。

分发数据的正确程序是什么？
我刚刚找到了一种存储在 localStorage 中的方法，但这种方法可能会被用户禁用。也许我只需要一个提示而没有代码，所以我可以找到自己。

标签： jsonapivue.js

解决方案

非常感谢您的评论@Ohgodwhy

所以我的解决方案比我想象的要容易得多。
这在每个 view.vue 中都可用：

<table id="items">
    <tr v-for="(item, index) in this.$root.listData" :key="index">
        <td class="p-1">{{ item.name }}</td>
        <td class="p-1">{{ item.city }}</td>
        <td class="p-1">{{ item.country }}</td> 
    </tr>
</table>

推荐阅读