How can I write this code to be more efficient - vue.js

Question

I am learning Vue.js and I am setting up a website where I am using LocalStorage to store data.
I wrote some code, which is a little clunky and very repetitive:
<script>
const app = new Vue({
el:'#app',
data:{
explosive_pullups_1: '',
explosive_pullups_2: '',
explosive_pullups_3: '',
tuck_front_raises_1: '',
tuck_front_raises_2: '',
tuck_front_raises_3: '',
},
mounted() {
if (localStorage.explosive_pullups_1) {
this.explosive_pullups_1 = localStorage.explosive_pullups_1;
}
if (localStorage.explosive_pullups_2) {
this.explosive_pullups_2 = localStorage.explosive_pullups_2;
}
if (localStorage.explosive_pullups_3) {
this.explosive_pullups_3 = localStorage.explosive_pullups_3;
}
if (localStorage.tuck_front_raises_1) {
this.tuck_front_raises_1 = localStorage.tuck_front_raises_1;
}
if (localStorage.tuck_front_raises_2) {
this.tuck_front_raises_2 = localStorage.tuck_front_raises_2;
}
if (localStorage.tuck_front_raises_3) {
this.tuck_front_raises_3 = localStorage.tuck_front_raises_3;
}
},
watch: {
explosive_pullups_1(pullups1) {
localStorage.explosive_pullups_1 = pullups1;
},
explosive_pullups_2(pullups2) {
localStorage.explosive_pullups_2 = pullups2;
},
explosive_pullups_3(pullups3) {
localStorage.explosive_pullups_3 = pullups3;
},
tuck_front_raises_1(tuck_front_raises1) {
localStorage.tuck_front_raises_1 = tuck_front_raises1;
},
tuck_front_raises_2(tuck_front_raises2) {
localStorage.tuck_front_raises_2 = tuck_front_raises2;
},
tuck_front_raises_3(tuck_front_raises3) {
localStorage.tuck_front_raises_3 = tuck_front_raises3;
},
}
})
</script>
I would like to know a way to write this code to be less repetitive.

Answer 1

You can put the exercise data into its own object, and save that to localStorage instead. E.g.:
<script>
const app = new Vue({
el:'#app',
data: {
exercises: {},
},
mounted() {
this.exercises = JSON.parse(localStorage.getItem("exercises"));
},
watch: {
exercises(newExerciseValues) {
localStorage.setItem("exercises", JSON.stringify(newExerciseValues));
},
}
})
</script>
If you really need to store and retrieve the individual exercises explicitly, I would recommend keeping the data in one exercises object, and simply use a for loop to check/set everything. Something like this:
[...]
watch: {
exercises(newExercises) {
const exercisesToCheck = [
'explosive_pullups_1',
'explosive_pullups_2',
'explosive_pullups_3',
'tuck_front_raises_1',
'tuck_front_raises_2',
'tuck_front_raises_3',
];
for (const exercise of exercisesToCheck) {
localStorage.setItem(exercise, this.exercises[exercise]);
}
},
},
[...]
On a side note, be very careful when working with objects in Vue. If you need to add a new exercise to the exercises object, avoid using this.exercises['new_exercise'] = newExercise. Instead, use Vue.set(this.exercises, 'new_exercise', newExercise). Check out the Vue docs for an explanation.