Understanding State Store in Vuejs
Hello developers, in this post I am going to share with you how I understood the way state store works in Vue. It took me a lot of time to understand exactly what they are and how they work. Hopefully you will get something from this post.
Let’s get started.
Imagine there is a buffet, and you are allowed to get anything you need to eat. For you to get anything you need from a buffet, you need serving spoons and a side plate to put your food on . In this case, think of the buffet as a database, the serving spoons as HTTP requests in Laravel (or other language) which fetches and sends data, and the side plate as a store in Vue. This scenario teaches you how you load data from the database, to your store.
According to Vuex documentation, a “store” is basically a container that holds your application state. The store is used to keep data that you want to manage. This saves you a hustle of using a lot of http requests. This data saves as universal constant variables that are not likely to change. Which is constant data that is required by different component, .
You will have only one store for each application, by this, it means you can define different variables in your state tree that can be used across the whole application. As illustrated in the snipped below, where we have variable user, and variable dropdowns.
There are two things that make a Vuex store different from a plain global object according to the documentation.
- Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store’s state changes.
This means that mutations are called and clears the state store each time the action is done by the user. - You cannot directly mutate the store’s state. The only way to change a store’s state is by explicitly committing mutations. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.
Well I understood this statement as etiquette in development, use serving spoons to get food from a buffet to put on your side plate, then use a spoon or fork to eat your food from your side plate. You cannot go and eat food directly from the buffet. Same principle applies to the data in the store.
Below is a practical example of how the frontend uses the store to communicate with the backend.
Steps to understanding stores in Vuejs
Step 1: create a file and give it a name, with the extension of language that you are using. In this example am using typescript so mine will be index.ts. Then import the vue, vuex like the snippet below
Step 2: State -means the data that your components depend on and render. This is where variables are declared.
Step 3: Mutations -the change of data based on an event done by the user.
Step 4: Getter- computed methods for the store which return the state value.
Step 5: Action- commits the mutations. This saves and deletes the sate values based on the mutations state.
Below is a full code snippet on how to create a state store
Well hope this post helps you understand the way state store works in Vuejs. Disclaimer: Please never store user details in your store, it’s a bad practice. This was used as a simple example to illustrate how stores can be used.
Happy codding.
