Check out a free preview of the full Vuex for Intermediate Vue 2 Developers course

The "Getters Exercise" Lesson is part of the full, Vuex for Intermediate Vue 2 Developers course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to modify the language in which the information is displayed using a getter.


Transcript from the "Getters Exercise" Lesson

>> In the example I showed you, we looked at a Getter, which is essentially checking the state, to make sure the state doesn't fall below a number. So in the code I showed you, I'm checking to make sure that the state, or the supply state doesn't fall below ten.

And if it does fall below ten, it gives you this caution icon, and I'm doing that via Getter. And so this is the code that I showed you again, just for refresher, I created a Getter called is supply low. And then in my computed, I'm hooking that up with this.$store.getters.iSupplyLow.

And so that's a really useful example, but we'll look at a different example, just so that we can solidify this concept slightly more. So let's assume that we have the same application, and we wanted to change the language in which, we are displaying information. So right now we have information that's by default in English, but let's say we want to switch it so it's in Espanol.

So we can click a button in the top right corner, and it switches automatically from English to Spanish. And that is useful via Getter, because let's assume we have all of the translations in state, or somewhere else that we wanna store it. We want to be able to toggle the specific language in which, we're showing information and then use a Getter using that way.

I'll explain specifically what I mean, in this particular exercise. For this, we're going to switch out the language, so we handle everything in Vuex. And I'll go into the exercise specifically. So I show you where everything is in the moving parts, so you can deal with them within the app itself.

So what I've given you is I've given you, an object called translations. It has English and Spanish within them, so there's various ways in which you can translate, but it's just one giant object. And then what I want you to do is, I want you to be able to change the language selected, so language selected now in state is by default English.

And we're going to hook up an action and a mutation, that changes this specific language selected from English to Spanish.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now