Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
Organize + Automate + Deploy = Webpack Chapter 16

Now that our application works, you can see how much we will gain by putting 0.93


dollars into a bank account with 2.25 percent interest and hibernating for 1,000 years (4.3
billion dollars!):


The formula inside the code is not much of a bother right now. Still, what if we had another


component that also does the same calculation? We would also like to make it more explicit


that we are computing the compound interest and we don't actually care what the formula
does in this scope.


Create a new file, named compoundInterest.js, inside the src folder; write the


following code inside it:


export default function (Principal, yearlyRate, years) {
const P = Principal
const r = yearlyRate
const t = years
return P * Math.pow((1 + r), t)
}

We then modify the code in App.vue accordingly:


computed: {
final () {
return compoundInterest(
this.principal,
this.interestRate,
this.timeYears
)
}
}

Also, remember to import the file we just created at the top of the JavaScript part:


<script>
import compoundInterest from './compoundInterest'
export default {
...
Free download pdf