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

【问题标题】：Make JSON data from App.vue accessible in all views使来自 App.vue 的 JSON 数据在所有视图中都可访问
【发布时间】：2021-11-30 14:35:58
【问题描述】：

到目前为止，我的 Vue3 SSA 包含以下文件：
应用程序.vue
意见/首页
浏览次数/Page_A
浏览次数/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 中的方法，但这种方法可能会被用户禁用。也许我只需要一个提示，没有代码，所以我可以自己找到。

【问题讨论】：

如果这是一个小项目，在rootVue实例下实现的组件可以通过this.$root访问其属性

标签： json api vue.js

【解决方案1】：

非常感谢您的评论@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>

【讨论】：