VueJs with vuex — for absolute beginners

For every single page application there must be a store for optimal way of data sharing between components.For Reactjs we have redux/flux and for Angular we have ngrx. For Vuejs we have vuex.

Before you proceed you should have a basic understanding of Vuejs or at least the concept about Model–view–viewmodel (MVVM).We will be having components ,views and styles like every SPA frameworks.Ill be covering vuex from scratch so no prior knowledge in vuex is required.

What is a store ?

A store as for every single page application is a single point of truth(simply data).It provides API’s for modifying the data in the store. Vuex is a state management pattern and library for Vuejs applications. It serves as a centralized store for all the components in an application.

Installation of vuex

Assuming you have a base vuejs application.Simply execute this command within the project.

npm install vuex

Structure of Vuex store

In the root folder of your application create this file and name it as store.js

And in this main.js file where all the bootstrapping is done add this line where store is the store.js file

and in the bootstrapping section

Now we have successfully imported store in our application.Lets go through the different sections in the store.js

state : It holds all the data for our application.We can even set the initial state of data here for example

getters : Computed properties of data is stored here.For example we want to get the count of all users in the store.Simply write

mutations: Functions to manipulate store is written here.We will come to that later in detail.

actions : Actions are similar to mutations, the differences being that:

  • Instead of mutating the state, actions commit mutations.
  • Actions can contain arbitrary asynchronous operations.

Now lets move to our application and what we are trying to achieve.Our application on initial load (more specifically on load of a component) will fetch some data from an API and stores it in the vuex store.We read the same data from the store and do all the manipulations with it.

The API part

Name the file as UserApi.js.we are using axios for API calls and dont forget to add this line in main.js

so the url will be https://jsonplaceholder.typicode.com/users

The component part

Lets call this API in the created life cycle hook of vuejs

Now we have to use helper functions of vuex to retrieve and set data from store.
In our component we have to import this

These helpers are used to map store with components (mutations,state and getters)

Lets get back to our store.js and add our mutations,getters and states

Again in our component and in the life cycle hook computed add this

Again in our component and in the life cycle hook methods add this

Now we have added all the code related to store.js. Now its time to call and utilize them.Previously we had UserApi which calls the API on page load.We are storing the response in our store.

User API data

Binding the store data with template

Use of getters

we had mapGetters in our application.simply call that getter function.

Manipulations of store

Removing an user from store

Adding an user to the store

Finally lets go through the steps once again

  1. Initialize store with respective getters,mutations and state
  2. On load of the component call the API,on success of it store the data in our vuex store by passing the data to a mutation function.Use mapMutations to call mutation function from a component
  3. Use getters wherever necessary.
  4. Implement the same for ADD and DELETE functionality.
  5. Bind store variables to components using mapState.

Screenshot

The complete example can be found here
https://github.com/ubercooluk/vuex-example

just clone the repo. Then all you have to do is

Conclusion
We have gone through vuex store,helper functions in store and finally how to communicate between store and components and use a single ,manageable source of data for our application.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store