Question

我对Vue很陌生，我试图用它创建我的第一个应用程序（我已经完成了整个教程，所以它不像我是全新的它）。我来自Java / Grails背景，所以这个新的面向前端的webapps＆＃34;对我来说仍然很困惑。我正在使用Vue 2和webpack。

我正在使用的问题是在应用初始化时运行方法，这会在App.vue组件中创建数据（我假设它是根组件，这是正确的吗？）然后访问此数据在儿童组件中。所以我特别想要做的就是创造出来的＆＃39;生命周期钩子我想检查用户是否登录，然后我想相应地更新我的导航栏（如果没有则显示登录按钮，否则显示用户的名字）。

我甚至还没弄清楚我到底是如何确定用户是否已登录到目前为止我只是试图在App.vue组件中创建虚拟数据然后在子组件中访问它。我所研究过的每个地方都说我应该使用一辆活动车，但（我认为）不会为我工作（如果我错了，请纠正我）因为我能找到的唯一例子是所有$ emit函数都在用户事件（如按钮点击）上调用，我希望它始终可以在任何地方全局访问（并且可变异）数据。

所以我会尝试向您展示一些我想到的代码：

App.vue：

...stuff...
data() {
  return {
    authToken = '',
    userdetails = {},
    loggedIn = false
  }
},
created: function() {
  // check browser storage for authToken
  if(authToken) {
    // call rest service (through Vue Resource) to Grails backend that I set up 
    // beforehand and set this.userdetails to the data that gets returned  
    if(this.userdetails) {
      this.loggedIn = true;
    }
  }
}
...stuff...

Home.vue：

<template>
  <div class="home">
    <nav-bar></nav-bar>
  </div>
</template>
...stuff

NavBar.vue：

<template>
  <div class="navBar">
    <div v-if="loggedIn">Hi {{ userdetails.name }}</div>
    <div v-else>Please log in before continuing.</div>
  </div>
</template>

如果任何代码中有任何错误，请原谅，只是为了表明我正在尝试做的事情或多或少，我现在已经完成了大部分工作。所以主要的问题是：我如何让v-if="loggedIn"和{{ userdetails.name }}部分工作（显然它现在已经设置的方式无法正常工作，对吧？）。除此之外，还有关于＆＃34;全局变量的一般建议＆＃34; Vue js中的数据流将受到赞赏因为我认为我的服务器端应用心态可能无法在前端javascript应用中使用。

Answer 1

要从父组件获取数据，您可以在子组件中使用this.$parent.userdetails。

但更好的方法是使用像这样的道具

https://vuejs.org/v2/guide/components.html#Passing-Data-with-Props

Answer 2

精简模式，不适用于复杂的共享任务

您可以使用预置字段在任何地方访问全局应用程序组件（路由，组件，嵌套组件）：

this.$root

过度设计者注意事项：在vue指南：http://vuejs.org/v2/guide/state-management.html中正式建议将其作为“精简版”方法。

很明显，它不是一种体系结构的模式化解决方案，但是只共享一个或两个变量就可以了。

在这种情况下，这种精益的方法避免了开发人员仅为此类琐碎的共享任务而导入诸如vuex，完善开发，专有技术要求和页面下载之类的完整共享框架。

如果您不喜欢精简的方法，即使在适当使用并正式提出建议的情况下，也许也不是如何共享问题，而是要使用哪种框架。

例如，Angular可能最适合重型工程方法，但我并不是说一个要比另一种更好，我的意思是不同的仪器套件最适合不同的任务和方法，当我需要实现更重的性能时也使用它更复杂的解决方案，在这种情况下，即使使用vuex，我也无法处理所有组件的交互和实时数据共享。

Answer 3

其他开发者或 vue 本身不推荐以下方法。

<script src="{{ asset('/assets/js/jquery.min.js') }}" defer></script>

或

this.$root;

在我看来，跨组件共享任何数据的最佳方式是使用 vuex 状态管理。

这里是官方文档链接：https://vuex.vuejs.org/#what-is-a-state-management-pattern

Vue js 2 - 从子组件访问App.vue中的数据

3 个答案: