title: Vue and Vuex: Handling dependent computed properties
body: <p>My application is a cut-down spreadsheet built in Vue with Vuex.  The key components are <code>TableCollection</code>, <code>Table</code> and <code>Row</code>.  The <code>TableCollection</code> has an array with multiple <code>Table</code> objects.  Each <code>Table</code> has an array with multiple <code>Row</code> objects.</p>
  
  <p>The <code>Row</code> component has a property named <code>calculatedField</code>.  This simply combines two fields in the row to produce a third field.  My options are to implement <code>calculatedField</code> as a computed property, local to the <code>Row</code> component, or as a getter in the Vuex store.</p>
  
  <p>The <code>Table</code> component requires a <code>subTotal</code> value, which is calculated by adding the <code>calculatedField</code> for all rows in the table.  As you can see, the <code>subTotal</code> calculation is dependent on the <code>calculatedField</code> calculation.</p>
  
  <p>If I implement <code>calculatedField</code> as a local computed property of <code>Row</code>, it is cached.  The problem is however that I can't seem to access the calculated field from a <code>Table</code> parent.  I tried the following in <code>Table</code>:</p>
  
  <pre><code>computed : {
      subTotal : function () {
          let total = 0;
          this.table.rows.forEach(function (row) {
             total += row.calculatedField;
          });
          return total;
      }
  }
  </code></pre>
  
  <p>The result was NaN.</p>
  
  <p>One solution would be to duplicate the logic from <code>calculatedField</code> in the computed property of <code>Table</code>, but that's not DRY.</p>
  
  <p>The other alternative would be to implement both <code>subTotal</code> and <code>calculatedField</code> as getters in the store, however this would mean passing arguments to the gettter (<code>tableId</code>, <code>rowId</code>, or both), and so the results would not be cached.  This seems really inefficient.</p>
  
  <p>The final possibility is that I implement my <code>calculatedField</code> logic in a global helper or mixin.  This would avoid code duplication and getter inefficiency, but doesn't feel quite right - the code relates specifically to <code>Table</code> and <code>Row</code>, and would ideally be kept there.</p>
  
  <p>Are there other solutions I have overlooked?  What is the ideal 'Vue-way'?</p>