title: One global data structure in Vue.js
body: <p>I am building a single page app with Vue.js. It's a relatively simple app, more like an extended, opinionated spreadsheet. I'm using <code>vue-router</code> to handle different views of the app, some are used to enter new data, some are used to perform calculations on the data but all that data is intertwined (data entered in view #1 is used to enter data in view #2 and then both are used to calculate something in view #3).</p>
  
  <p>That means I need a global data structure. From my research I found that I have several options to handle that:</p>
  
  <ul>
  <li>the "proper" way: emitting events in components and handling them in the parent; that seems a little overcomplicated for what I want to achieve</li>
  <li>accessing the parent scope directly in component templates via <code>$parent.$data</code></li>
  <li>my current solution, assigning the parent data reference to the child data object</li>
  </ul>
  
  <p>Like so:</p>
  
  <pre><code>const REPORTS = {
    template: templates.reports,
    data: function(){
      return this.$parent.$data
    }
  };
  </code></pre>
  
  <p>However, my sixth sense is telling me that it's not a good practice.</p>
  
  <p>If I'm right, <strong>what are better ways of achieving this: one, global data structure, accessible from all components?</strong></p>