DEV Community

Judith ☁ Oiku
Judith ☁ Oiku

Posted on • Updated on

What is Vuex

Introduction

vuex is a state management library for vue that makes it less cumbersome to share and distribute data within the vueJs application.

Prerequisite

Basic knowledge of Vue is required

What next

Without vuex, we can simply distribute data between components using props, but as the application gets larger, managing data can be quite a handful.

To solve this problem, we make use of the vuex, here we have a centralized store, and from that store our components can access our state directly.

A typical store folder looks like this


  import Vue from 'vue'
  import Vuex from 'vuex'

  Vue.use(Vuex)

  export const= new 
  Vuex.Store({
   state:{
   },
   getters:{
   },
   mutations:{
   },
   actions:{
   }
})
Enter fullscreen mode Exit fullscreen mode

Store : This holds out state in our application, and this can be accessed using

this.$store
Enter fullscreen mode Exit fullscreen mode

State : This is the data that will be shared in the application. so instead passing it via props. we can simply have it in our store and have our components access them directly.

Getters: According to the Vuex documentation, we think of getters as the computed property for store and it has an helper , which is the mapGetters Helper that simply takes out store getters to out component computed property.

Mutations: State can only be changed in a vuex store by commiting a mutation. A mutation cannot be called directly. Inorder to do so, you need to use store.commit. Instead of committing a mutation in a component methods, we simply dispatch an action on the mutation.

Actions : Action commits a mutation using the contex.comitand dispatch the action using store.dispatch. We also have the mapAction helpers.

Understanding the basic concept of vuex can help us structure and maintain our code effectively

For further reading , check out the vuex documentation to read more on the core and advance concepts of vuex

Original article was published on my blog

Top comments (2)

Collapse
 
amineminoop profile image
amineminoop

Vuex helps us deal with shared state management with the cost of more concepts and boilerplate. It's a trade-off between short term and long term productivity.

If you've never built a large-scale SPA and jump right into Vuex, it may feel verbose and daunting. That's perfectly normal - if your app is simple, you will most likely be fine without Vuex. A simple store pattern (opens new window)may be all you need. But if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux

vuex.vuejs.org/#what-is-a-state-ma...

Collapse
 
janpauldahlke profile image
jan paul

little tip for improving usage: github.com/davestewart/vuex-pathify