Share data from one component with another component in same App.js - vue.js

Question

I have the following App.js file that runs on WebSphere. I just added a new component that needs a value from the same API the larger component uses. I don't want to hit the API twice. I'm thinking I need to move the data access into the new Vue({… and then pass the result into the two components. How do I do that? Can someone point me to sample code?
Vue.component('greeting-portlet-text', {
data: function() {
return {
today: '',
bonusPageLink: '/wps/myportal/k/payroll/bonus'
};
},
methods: {
getFormattedTodaysDate: function() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
return today;
}
},
mounted: function() {
this.today = this.getFormattedTodaysDate();
},
template:
'<div class="greeting-text"><h1>Welcome ' +
_greentin_app_config.user.firstName +
'</h1>' +
' <p class="subtitle">Your bonus progress as of {{ today }}</p> ' +
' <div class="greeting-buttons greeting-buttons-top show-for-large">' +
' <greeting-portlet-buttons></greeting-portlet-buttons>' +
' <a :href="bonusPageLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent highlight">View Full Bonus Progress</a>' +
' </div>' +
'</div>'
});
Vue.component('greeting-portlet-buttons-panel', {
data: function() {
return {
bonusPageLink: '/wps/myportal/k/payroll/bonus'
};
},
template:
'<div class="greeting-buttons greeting-buttons-bottom grid-x grid-margin-x">' +
' <div class="cell small-12 medium-6">' +
' <greeting-portlet-buttons></greeting-portlet-buttons>' +
' </div>' +
' <div class="cell small-12 medium-6"><a :href="bonusPageLink" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent highlight">View Full Bonus Progress</a></div>' +
'</div>'
});
Vue.component('greeting-portlet-buttons', {
data: function() {
return {
SmartDriveLink: '/wps/myportal/k/company-info/news/smartdrivefaq'
};
},
template:
'<div>' +
' <a v-if="SmartDriveScore>=25 && SmartDriveScore!=99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--red-A700 mdl-color-text--white">SmartDrive Score: {{SmartDriveScore}} <i class="material-icons">thumb_down_alt</i></a>' +
' <a v-if="SmartDriveScore=== 99999" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--yellow">SmartDrive Score: <i class="material-icons">phone_in_talk</i> CALL DDM</a>' +
' <a v-if="SmartDriveScore<25" :href="SmartDriveLink" class="button expanded mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--green mdl-color-text--white">SmartDrive Score: {{SmartDriveScore}} <i class="material-icons">thumb_up_alt</i></a>' +
'</div>'
});
Vue.component('greeting-portlet-progress', {
data: function() {
return {
bonus: {
payBand: {
showPayBand: false // default
},
milageTiers: {
tier1: 0,
tier2: 0,
tier3: 0,
tier4: 0
},
rateTiers: {
tier1: 0,
tier2: 0,
tier3: 0,
tier4: 0
},
currentMileage: 872
},
viewStatus: {
dataLoaded: false
},
storageKey: 'bonusProgressData'
};
},
computed: {
tier1Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier1);
},
tier2Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier2);
},
tier3Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier3);
},
tier4Miles: function() {
return this.formatNumber(this.bonus.milageTiers.tier4);
},
tier1Rate: function() {
return '$' + this.bonus.rateTiers.tier1;
},
tier2Rate: function() {
return '$' + this.bonus.rateTiers.tier2;
},
tier3Rate: function() {
return '$' + this.bonus.rateTiers.tier3;
},
tier4Rate: function() {
return '$' + this.bonus.rateTiers.tier4;
},
tier1Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier1 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
tier2Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier2 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
tier3Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier3 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
tier4Percentage: function() {
return (
Math.floor(
(this.bonus.milageTiers.tier4 / this.bonus.milageTiers.tier4) * 100
) + '%'
);
},
currentMilage: function() {
return this.formatNumber(this.bonus.currentMileage);
},
progress: function() {
return this.progressNumber + '%';
},
progressNumber: function() {
var percentage = 0;
if (
this.bonus.currentMileage !== 0 ||
this.bonus.milageTiers.tier4 !== 0
) {
percentage = Math.floor(
(this.bonus.currentMileage / this.bonus.milageTiers.tier4) * 100
);
}
return percentage;
},
showPayBand: function() {
return this.bonus.payBand.showPayBand;
},
payBandMiles: function() {
return this.formatNumber(this.bonus.payBand.miles);
}
},
methods: {
loadBonusDataFromService: function() {
var app = this;
var servicePath =
_greentin_app_config.serviceBasePath +
'/v1/knight/portal/bonus/progress';
axios
.get(servicePath)
.then(function(response) {
app.bonus = response.data;
app.viewStatus.dataLoaded = true;
if (typeof storageWrap !== 'undefined') {
// cache the data
storageWrap.setItem(app.storageKey, app.bonus);
}
})
.catch(function(error) {
console.error(error);
});
},
getBonusData: function() {
var cachedData;
if (typeof storageWrap !== 'undefined') {
cachedData = storageWrap.getItem(this.storageKey);
}
// return cachedData if found otherwise load the data from service
if (cachedData) {
this.bonus = cachedData;
this.viewStatus.dataLoaded = true;
} else {
this.loadBonusDataFromService();
}
},
formatNumber: function(value) {
if (typeof value !== 'number') {
return value;
}
var formatter = new Intl.NumberFormat('en-US', {
style: 'decimal',
minimumFractionDigits: 0
});
return formatter.format(value);
}
},
mounted: function() {
this.getBonusData();
},
template:
'<div>' +
'<div v-if="viewStatus.dataLoaded" class="progress-wrapper">' +
'<div class="progress">' +
'<div class="progress-bar" v-bind:style="{ width: progress }">' +
'<span class="progress-bar__label" v-if="progressNumber > 9" >{{ currentMilage }} mi.</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier1Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier1Miles}}</span><br>' +
'<span class="progress-bar__markerText__value">{{tier1Rate}}</span>' +
'</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier2Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier2Miles}}</span><br>' +
'<span class="progress-bar__markerText__value">{{tier2Rate}}</span>' +
'</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier3Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier3Miles}}</span><br>' +
'<span class="progress-bar__markerText__value">{{tier3Rate}}</span>' +
'</span>' +
'</div>' +
'<div class="progress-bar__marker" v-bind:style="{ left: tier4Percentage }">' +
'<span class="progress-bar__markerText">' +
'<span class="progress-bar__markerText__label">{{tier4Miles}}+</span><br>' +
'<span class="progress-bar__markerText__value">{{tier4Rate}}</span>' +
'</span>' +
'</div>' +
'</div>' +
'<div class="payband" v-if="showPayBand">' +
'<p class="payband__stat"><span class="payband__label">Miles to next pay increase:</span> <span class="payband__amount">{{payBandMiles}}</span></p>' +
'<p class="payband__description"><span>* SOLO = $0.01/mi</span><span>* TEAM = $0.005/mi</span></p>' +
'</div>' +
'</div>' +
'</div>'
});
(window.onload = function() {
var SmartDriveScore = 0;
storageWrap.setAdaptor(sessionStorage); // default to session storage
if (_greentin_app_config.displayPage === 'dashboard') {
if (_greentin_app_config.started !== true) {
// performance check
_greentin_app_config.started = true; // sets performance flag
new Vue({
el: _greentin_app_config.targetEl,
mounted: function() {
this.SmartDriveScore = 99999;
},
template:
'<div class="greeting-portlet">' +
' <div class="grid-x grid-margin-x">' +
' <div class="cell small-12 large-5"><greeting-portlet-text></greeting-portlet-text></div>' +
' <div class="cell small-12 large-7"><greeting-portlet-progress></greeting-portlet-progress></div>' +
' <div class="cell small-12 hide-for-large"><greeting-portlet-buttons-panel></greeting-portlet-buttons-panel></div>' +
' </div>' +
'</div>'
});
}
} else {
new Vue({
el: '#bonus-progress-wrapper',
template:
'<div class="default-view"><greeting-portlet-text></greeting-portlet-text>' +
'<greeting-portlet-progress></greeting-portlet-progress></div>'
});
}
})();