Vuex examples — State, Getters & Mutations (Part 1)

https://vuex.vuejs.org/

It’s been nine months since I worked on Ruby on Rails and Vue.js. I myself am not so sure whether I have improved or not. But, as wise man said:

“Don’t wait to be perfect to share your knowledge to everyone”

and also an expert once said, “Done is better than perfect”.

So, here I am, trying to share what I have got so far.

As you can see on the title, I am going to share basic understanding about Vue.js and it’s state management — Vuex. This is going to be a series of Vue.js and Vuex which I divide into some series.

For those who don’t know what Vue and Vuex is, Vue.js is a Progressive JavaScript Framework. Vue is used for front end development while Vuex is used for managing state inside Vue. I am not going to explain all here, if you want to have a complete understanding about those things, please refer to their website Vue.js and Vuex. This article will be discussing about State, Getters & Mutations in Vuex.

Add Vuex into Vue.js Project

First thing first, I assume that you are already create new Vue.js project.

Newly Created Vue Project

There are many ways to add Vuex into your existing project. Here I use NPM to add Vuex package. With NPM installed in your machine, you can simply type:

npm install vuex --save
# OR
yarn add vuex # if you are using yarn instead of npm

Or if you want to see the full guide, please go to the official guide Vuex Intallation.

State

State in Vuex is the main aspect that we should keep in-mind. Because Vuex is all about managing the state of our element in our web apps. Here is my code https://codesandbox.io/s/vuex-examples-b155q if you want to take a look. To make state, you can simply add variable in inside your state:

State

If you look at it, you will find that state is like a variable. The difference is its like a global variable that we can access anywhere in our components.

Getters

Actually we can access state in our Vuex store directly, but it’s suggested not to do so. Instead we can access our state using Getters, it’s like set and get in Java. It’s also important to notice that Getters seems like computed properties in Vue components because it’s reactive for changes. To access state, you can simply do like this:

Getters

Mutations

If Getters looks like get, you can guess what mutations are. Simply put, Mutations is kind of “mutations” (changes). pretty self explanatory. It is used to change the state. Even though you can change the state directly, still you are suggested to use Mutations if you want to change it. It’s related to how the vuex reacts to the changes we make to the state.

Mutations

Your app.vue looks like…

App.vue

Practice, Practice, Practice

In order to have a clear understanding, you have to get dirty. It means that you need to try many times though sometimes you feel like it gets a bad result, just keep trying and try and keep track of this series because I am going to share about a case why you should use getters instead of access state directly in the next post. Leave your comment and let me know what you think.

--

--

--

Stories about designing and building tech that matters to people.

Recommended from Medium

Lab Notes: Exploring the Compatibility of React Native for Android Things

Deploying a React application to Amazon s3 with Github actions.

30 Days of Framer X : Week One

How JavaScript works: functional style and how it compares to other approaches

Tweak Wordpress for improved performance & Lighthouse scores

Here’s why you should be excited about Ivy!

Increasing UI with react-modal

ng-samurai — Schematics to improve tree shaking of Angular libraries

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
Heri Yulianus

Heri Yulianus

More from Medium

Hosting Node.js Projects with Digital Ocean for Linux or Mac OS Users

Creating a Dev Container for TypeScript and VS Code — Part 1

Creating BIP21 Invoice with NodeJS

Video Call Invitations with Agora RTM and RTC Using Vue JS and Flask

A user in a group video call session