title: Vue js 2 - Accessing data in App.vue from child components
body: <p>I'm pretty new to Vue and I'm trying to create my first app with it (I have worked through a whole tutorial though so it's not like I'm completely new to it). I come from a Java/Grails background so this new "frontend oriented webapps" is still pretty confusing to me. I'm using Vue 2 with webpack.</p>
  
  <p>The problem I'm having is running methods when the app initializes which creates data in the App.vue component (which I'm assuming is the root component, is that correct?) and then accessing this data in child components. So specifically what I'm trying to do is on in the 'created' life cycle hook I want to check if the user is logged in or not and then I want to update my navbar accordingly (show a login button if not, else show the user's name, for example). </p>
  
  <p>I haven't even quite figured out how exactly I'm gonna determine if the user is logged in yet coz so far I've only been trying to create dummy data in the App.vue component and then accessing it in child components. Everywhere that I've researched says that I should use an event bus but (I think) that's not gonna work for me (correct me if I'm wrong) coz the only examples I can find is all $emit functions being called on user events (like button clicks) and I want it to have the data globally accessible (and mutate-able) everywhere all the time. </p>
  
  <p>So I'll try to show you some code of what I had in mind:</p>
  
  <p>App.vue:</p>
  
  <pre><code>...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...
  </code></pre>
  
  <p>Home.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="home"&gt;
      &lt;nav-bar&gt;&lt;/nav-bar&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  ...stuff
  </code></pre>
  
  <p>NavBar.vue:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="navBar"&gt;
      &lt;div v-if="loggedIn"&gt;Hi {{ userdetails.name }}&lt;/div&gt;
      &lt;div v-else&gt;Please log in before continuing.&lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Please excuse if any of that code has any mistakes in it, it's just to show more or less what I'm trying to do and I made most of it up right now. So the main question: How do I go about getting the <code>v-if="loggedIn"</code> and <code>{{ userdetails.name }}</code> part to work (coz obviously the way it's set up now that won't work, right?). And then besides that, any general advice on "global variables" and data flow in Vue js will be appreciated coz I believe that my server-side app mentality might not work in front-end javascript apps.</p>