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

The "Getters Solution" 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:

Divya live codes the solution to the getters exercise, demonstrates how to add getters to a state, uses getters in transitions, and explains that in this practice gatters are used so that data is updated outside of the component.


Transcript from the "Getters Solution" Lesson

>> For exercise, to work with Vuex getters, we are going to work on switching out the logic in our component so that it's switch languages. And the logic for switching languages is handled in our Vuex getter. Let's look at the code just to see what exactly I mean by this.

So here we have our inventory. Specifically the item as well as some supplies so we can decrement as well as increment it. But the piece that I want you to focus on is this essentially so I can toggle between languages really easily. And so that is the exercise that we are going to be working on.

We'll go over the solution for this particular exercise. And I'll pull up the version that doesn't work at the moment and we'll slowly work our way through to get to what we need to do where the translation happens in the getter and not in the component itself. So one thing to note is that we have this translations object that's sort of outside of our Vuex store and our components.

The way in which we are doing the language toggle does happen in the dispatch. So we are dispatching a toggle language and the action is actually toggling and switching that language appropriately. So that is happening, but the piece in which the data is updated happens within the component, which is sort of what we want to move away from, we want to use a getter instead.

So in order to do this, we need to update this particular piece which is the translation code. So we're going to be moving away from doing this, which is essentially grabbing the translations. So we're adding the translations to the data attribute and then we are specifically grabbing the state.

So what we can do instead is we can move this to a getter. So the way that we'll do that is we will have a getter, and already is there. It's called translate Lang. And what we'll do is we will look for the translations. And then I believe it's accessing the states.

Hold on, I need to check this, yeah. So the way we're doing it is we're just looking at translations which is a global object and then we're going to specifically grab the language selected. So we have access to the states and we can grab that and we obviously need to return it because the getter requires that return value.

And then in our translation itself, we're no longer hard coding that piece. We're just going to return that getter. So we called our getter, I believe, translate Lang. So let's call it this and then we run it. And our code should work as expected. Because now it is no longer doing the hard coding of the translation in our component, it's doing it via the getter itself.

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