Create a Vuex Store using TypeScript

Here we have a component that shows a list of to-dos. This component has this type of to-dos locally, and we are going to move it to a store. For that, let's install Veux on this class. Then we are going to create a store folder with an index file.

Here, we will initialize the store and return the instance. For that, let's first import Vue and Vuex. Write vue.useVuex, and finally, let's create an instance of the store. It needs an object to be passed. For now, import to-dos from to-dos. Now, we are going to write in a second and use the object there.

Let's create that to-dos file. The store inspects an object with minimum state key. In the state, we are going to add the to-dos that we had in the component before. This has no typings yet, so let's create a types file under the source folder.

In there we can start writing all the types. For example, for the store, we can write an interphase state which has an array of to-dos as well as our models, starting by the to-do model, which has a text for now.

Now, we can go back to the to-dos store and import the state in there. Let's type the state. Now, if we misspell something, TypeScript will let us know. We still need to our Vuex store instance to the Vue app.

For that, in the main file, we can import the store that we have created in the to-dos file, and then add it to the Vue instance. Let's close all the files that we have open, and let's go back to the app component. In there, let's import a state from Vuex class, which is a decorator to select the part of the state.

Let's import as well their to-do model from types. Within the component, replace the to-do's local state by the one in the store by using the state decorator, using a variable with the same name of the state that you want to take, and type it as an array of to-do.

Let's try this out. If we reload, we'll see that this is working as before. There are a couple more of ways to select something from the store. For example, if you have to use [inaudible 3:09] variable instance to-dos, you can indicate with a string which part of that state you want to take. You see this is still working the same way.

If you want more flexibility, you can also provide a function. Pass in a state. You can return what part of the state you want, and that should still work.