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

Posted 2023-02-22

【中文标题】使 Vue 数据对所有组件全局可用和可访问

【英文标题】：Make Vue data globally available and accessible for all components

【发布时间】：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 访问数据？

【参考方案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 中是更好的解决方案。