Constants and variables

OK, let’s go down to our <script> section and see what Vue gives us out of the box to make our life easier. One thing it lets us do is define our constants up front, which keeps them scoped to the component.

In the last post, we spent a little time tweaking the stroke-dasharray value to make sure the animation of the timer’s top layer (the ring that animates and changes color as time progresses) is perfectly in line with its bottom layer (the gray ring that indicates past time). We also defined “thresholds” for when the top layer should change colors (orange at 10 remaining seconds and red at five seconds). We also created constants for those colors.

We can move all of those directly into the <script> section:

<script>

// A value we had to play with a bit to get right

const FULL_DASH_ARRAY = 283;

// When the timer should change from green to orange

const WARNING_THRESHOLD = 10;

// When the timer should change from orange to red

const ALERT_THRESHOLD = 5; // The actual colors to use at the info, warning and alert threshholds

const COLOR_CODES = {

info: {

color: "green"

},

warning: {

color: "orange",

threshold: WARNING_THRESHOLD

},

alert: {

color: "red",

threshold: ALERT_THRESHOLD

}

}; // The timer's starting point

const TIME_LIMIT = 20;

</script>

Now, let’s have a look at our variables:

let timePassed = 0;

let timeLeft = TIME_LIMIT;

let timerInterval = null;

let remainingPathColor = COLOR_CODES.info.color;

We can identify two different types of variables here:

1. Variables in which the values are directly re-assigned in our methods:

timerInterval : Changes when we start or stop the timer

: Changes when we start or stop the timer timePassed : Changes each second when the timer is running

2. Variables in which the values change when other variables change:

timeLeft : Changes when the value of timePassed changes

: Changes when the value of changes remainingPathColor : Changes when the value of timeLeft breaches the specified threshold

It is essential to identify that difference between those two types as it allows us to use different features of the framework. Let’s go through each of the type separately.

Variables in which values are directly re-assigned

Let’s think what we want to happen when we change the timePassed value. We want to calculate how much time is left, check if we should change the top ring’s color, and trigger re-render on a part of our view with new values.

Vue comes with its own reactivity system that updates the view to match the new values of specific properties. To add a property to Vue’s reactivity system we need to declare that property on a data object in our component. By doing that, Vue will create a getter and a setter for each property that will track changes in that property and respond accordingly.

<script>

// Same as before export default {

data() {

return {

timePassed: 0,

timerInterval: null

};

}

</script>

There are two important things we need to remember.

We need to declare all reactive variables in our data object up front. That means if we know that a variable will exist but we don’t know what the value will be, we still need to declare it with some value. If we forgot to declare it in data it will not be reactive, even if it is added later. When declaring our data option object, we always need to return a new object instance (using return ). This is vital because, if we don’t follow this rule, the declared properties will be shared between all instances of the component.

You can see that second issue in action: