使 Vue 数据对所有组件全局可用和可访问

【问题标题】：Make Vue data globally available and accessible for all components使 Vue 数据对所有组件全局可用和可访问
【发布时间】：2020-10-25 20:45:47
【问题描述】：

有一个带有一些页面的简单 Vue cli 应用程序。

在 Users.vue 中，我使用 axios 从 API 获取数据：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  mounted () {
    axios
      .get('https://api.github.com/users')
      .then(response => (this.users = response.data))
  }
}
</script>

这很好用。我可以访问属性。

但是我如何添加 axios 和全局挂载的钩子，例如App.vue 并能够从每个组件中的 json 访问数据？

【问题讨论】：

标签： vuejs2 axios vue-component

【解决方案1】：

为了在您的应用程序中使用来自各处的数据。你应该把它保存在商店里。使用vuex。 https://vuex.vuejs.org/

另一种方式也可以，以防您只需要用户孩子中的数据。您可以使用 props https://vuejs.org/v2/guide/components-props.html 简单地传递数据

【讨论】：

现在在App.js 我放置了挂载的钩子，并从我的路由器链接<router-link to="/users" :users="users">Users</router-link> 中尝试传递道具。但是子组件中没有数据？在那里我接受了道具props: ['users'],
您可以通过这种方式传递您的道具数据：<router-link :to="{ path: '/users', query: { myprop: 'someValue' }}">，但对于用户列表，我认为这不是理想的方式。在您的情况下，将其存储在 vuex 中是更好的解决方案。