All language subtitles for 6. Vuex modules

Hi, there.

In the last lecture, we created function of exchanges, which it serves as a simulation of making a

request to the network.

In this lecture, we'll talk about modules.

So what are modules?

In terms of the UX, you will create a module to grow up similar functionality, such as, in this case,

exchanges.

I'll drop it.

It'll be easier to understand.

So currently we have only one UX, all right.

So we have only one store and we are placing everything inside of this store.

So later we can create multiple functionalities not only to get exchanges, but also to get user to

get opportunities, as you will learn later and also the other types of data.

Currently, with this architecture, what we have here, we have no other options displace everything

into this one store.

You can imagine how many mutations and how many actions and how much how much state we will have.

Not very good.

So what we'll do instead, if you look at a modularity, the store will have a couple of modules or

can have multiple modules.

In our case, they'll have a modules like this.

You'll have that.

We will have an exchange as module.

We will have a user as a module.

We will have an opportunity.

Opportunities modules.

OK, so like here X changes, we'll have that users and we will have opportunities of poor during the

these and all of these modules will have their own functionality, their own states, all of them,

they will have their own state owned state state here, their own actions, their own mutations and

so on.

So then through all of your component.

What our home page.

Can connect this store.

And we can ask for any data from any module.

So I can ask you in this case for a good exchange is right, we are at least pitching here to get exchanges.

Exchange and Jess.

All right, I will find the modules of these actions belong store and I will execute it, OK, in this

case, not in this one of these needs one.

But these are one.

OK, or no excuse the action here.

I will get the data back here, back here and I have data in my home.

OK, so that's the modularity to not pollute the one file, create a separate file for every module.

And that's basically it.

That's the entire modularity.

All right.

So let's get a module's great open here, your files for the structure.

It is thoughtful that I will create a new folder, I will develop call into modules and modules that

will create our first module, which will call exchange.

All right.

You file in the modules and let's call it exchange module or exchange exchange dodgers.

Perfect.

But you will do you'll get your your index judges and basically all of this here is an exchange.

So copy everything, control a select everything.

Copy it.

Go to exchange.

Pass it here, OK?

For every module you donate to create a separate store.

You just need to create a story once.

So what you are returning from a module is just a pure object so it can create store and you can enable

his record here.

It does it.

Love your curly brackets for object.

You will scroll down and you will remove this bracket.

Also here.

OK.

Like this?

OK and create started on it here as well, so you can remove, import, create, store and that's what

you will have here on the exchanges.

Such exchanges export default, empty object and this perfect.

Now, people get back to your main module in technology as.

And you can start with the removal process.

You can enable go fetch exchanges, you can remove the exchanges here.

If you leave here, only create store now, state if you don't need any stay.

We don't need any actions.

We don't need any mutations here.

But what we need to define here will be the module module you'd like to reference here.

So under the store?

Great.

So let's import here.

Your first module, which is an exchange module, was your exchange from no need to find our modules

there.

So dot slash modules and exchange.

Now in the Create Story, you will specify modules, property like this, and he will specify your first

module, which is your exchange module.

Amazing.

And that's done.

Your application of law not working out when you will go back to browser, you will see a refresh.

There are no exchanges and I will inspect this.

I should see here issue.

OK.

That's not the actual issue I am looking for, but basically invalid.

Proper Typekit failed to for a proper exchange expected error by the code undefined.

So you can see that we are not getting any exchanges.

Go back to your calls and what's happening now in your home, the view, you're basically not accessing

your global state of the story, but you need to specify your module.

You need to specify your module and you need to access the exchanges on this module.

So any values store state.

Now the module name.

So what is what is our module name, how we are calling our module?

We can take a look in our index suggests and you can see we are calling our module exchange.

So humbled of your access to our state, but you've all got your exchange to access the X Change module

and on exchange you accessing the state of the exchanges.

That's how it is now.

So then you will save it.

I'll go back here after one second, you will see your exchanges appearing here.

OK, so one more time access store acts as a store of state on the state, acts as the module and on

a module acts as your state.

That's it.

The naming here is not a very nice review.

We'll take a look at the hero existing accessing a state exchange that exchanges are, that's not very

clear what's happening here.

We're not getting the single exchange under on the auction block.

Access to exchanges.

Not very good.

What we can do.

We can remove the state data.

They are keeping on in exchange module so we can go to our modules, exchange dodges.

And instead of calling it exchanges, let's go with the items.

Let's say OK items.

It's a much better name.

In this case, we have your items.

And instead of sitting here exchanges to state exchanges, which we don't have now, we have only state

items.

Will right here, state items and here equal exchanges.

Perfect.

Does the change and have your home told VOA to fix the computer that here so you need to agree or restore

state exchange module on exchange module, you have no items.

And that's it.

Now they can save.

We can check it out.

And up to refresh after one second, if your days are appearing and in a console, there are no issues

that's going to abate from this lecture.

Let's go and do more changes in the next one year.