Getters Solution

[00:00:00]
>> 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.

[00:00:18]
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.

[00:00:40]
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.

[00:01:06]
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.

[00:01:33]
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.

[00:01:51]
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.

[00:02:16]
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.

[00:02:39]
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.