Moving a Vuex Store into a File

[00:00:00]
>> So we'll review what our vuex looks like in a vue instance. Just so that you see where we started from and where we're moving towards. So here from line 1 to 10, we have our store so we instantiate the store and we create this concept of a store.

[00:00:16]
So in this case, it's a constant. And then on line 14 is where we pass that store to our vue instance. And our vue instance here is pretty isolated. Isolated in the sense that it's only used once and you can't use it anywhere else because it's not really reusable in this case.

[00:00:33]
But we want to move to a state where our store and our vue instance don't live in the same place. So what does that look like? Before I show you the code I want to show you the folder structure just so you understand where things live relative to the other.

[00:00:49]
So when you look at the folder structure, you have a concept of source. And the source is where all of the files that you're actually gonna be changing and updating live. And so we have components you have app.vue file, you have main.js and then you have this file called store.js.

[00:01:05]
Within the vue CLI, this is obviously up to preference. If you use vue CLI and you add vuex through vue CLI, generally what happens is that you get a store folder instead of a store file. So it will be store as a folder and then within store it has an index js file.

[00:01:27]
So that's what you'll see if you vue CLI. But again, It's up to you as to how you want to organize your store. And as we progress through the day I'll show you the different ways in which I use vuex and my store just for reference. So the store.js is where we'll be storing and adding all the store specific information.

[00:01:50]
And we obviously, want to add that to our vue component and the application as a whole. If you've used vue before, you might be familiar that main.js is where the nuts and bolts of where your vue is instantiated and created. So you can pass in plugins you can pass in all sorts of things to it.

[00:02:09]
In this case, we're gonna be passing the store to our main.js file. So main.js will import the store, which is created on the left. It imports that separately as ./store. And then you're passing that to your vue instance. Line 7 to 10 isn't too different from the CodePen example cuz you are instantiating vue and then adding the store.

[00:02:37]
But it's a bit different because there's a render context and there's a mount and so it's sort of single-file components specific code. But what I want you to take away from this is that you can have a store.js file. And then you can have a main.js file and those two have to talk to each other in order for your entire app to know that vuex exists.

[00:02:55]
So you're importing vuex as you see on line 2, you have to import it and then you have to use it.