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:{
}
})
Store : This holds out state in our application, and this can be accessed using
this.$store
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.comit
and 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)
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...
little tip for improving usage: github.com/davestewart/vuex-pathify