Questions And Answers

More Tutorials

VueJs Vuex


Vuex is a state management pattern + library for Vue.js applications. It serves as a centralised store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official dev tools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.


What is Vuex?

Vuex is an official plugin for Vue.js which offers a centralised datastore for use within your application. It is heavily influenced by the Flux application architecture which features a unidirectional data flow leading to simpler application design and reasoning.

Within a Vuex application the datastore holds all shared application state. This state is altered by mutations which are performed in response to an action invoking a mutation event via the dispatcher.

An example of the data flow in a Vuex application is outlined in the diagram below.
Individual Vue.js application components can access the store object to retrieve data via getters, which are pure functions returning a read-only copy of the desired data.

Components can have actions which are functions that perform changes to the component's own copy of the data, then use the dispatcher to dispatch a mutation event. This event is then handled by the datastore which updates the state as necessary.

Changes are then automatically reflected throughout the application since all components are reactively bound to the store via their getters.
An example illustrating the use of vuex in a vue project.
const state = {
 lastClickTime: null
const mutations = {
 updateLastClickTime: (state, payload) => {
 state.lastClickTime = payload
const getters = {
 getLastClickTime: state => {
 return new Date(state.lastClickTime)
const actions = {
 syncUpdateTime: ({ commit }, payload) => {
 commit("updateLastClickTime", payload)
 asyncUpdateTime: ({ commit }, payload) => {
 setTimeout(() => {
 commit("updateLastClickTime", payload)
 }, Math.random() * 5000)
const store = new Vuex.Store({
const { mapActions, mapGetters } = Vuex;
// Vue
const vm = new Vue({
 el: '#container',
 computed: {
 methods: {
 updateTimeSyncTest () {
 updateTimeAsyncTest () {

And the HTML template for the same:

<div id="container">
 <p>{{ getLastClickTime || "No time selected yet" }}</p>
 <button @click="updateTimeSyncTest">Sync Action test</button>
 <button @click="updateTimeAsyncTest">Async Action test</button>

1.Here the state contains lastClickTime property initialized as null. This setting up of default values is important to keep the properties reactive. Properties not mentioned in the state will be available but the changes made thereafter would not be accessible by using getters.

2.The getter used, provides a computed property which will be updated each time a mutation updates the value of the state property.

3.Only mutations are allowed to change the state and its properties, that said, it does so synchronously only.

4.An Action can be used in case of asynchronous updates, where the API call (here mocked by the randomly timed setTimeout) can be made in the action, and after getting the response a mutation can be committed to, to make the change to the state.

Why use Vuex?

When building large applications such as Single Page Apps (SPA's), which typically consist of many reusable components they can quickly become difficult to build and maintain. The sharing of data and state between these components can also quickly break down and become difficult to debug and maintain.

By using a centralised application data store the entire application state can be represented in one place making the application more organised. Through the use of a unidirectional data flow, mutations and by scoping component data access to only the data required it becomes much simpler to reason about the component role and how it should affect the application state.

VueJS components are separate entities and they cannot share data between each other easily.

To share data without vuex we need to emit event with data and then listen and catch that event with on.

component 1

this.$emit('eventWithDataObject', dataObject)

component 2

this.$on('eventWithDataObject', function (dataObject) {

With vuex installed we can simply access its data from any component without a need of listening to events.

We can also change data synchronously with mutators, use asynchronous actions and get data with getter functions.

Getter functions might work as global computed functions. We can access them from components:

Actions are global methods. We can dispatch them from components:
this.$store.dispatch('myAction', myDataObject)

And mutations are the only way to change data in vuex.We can commit changes:
this.$store.commit('myMutation', myDataObject)

Vuex code would look like this

state: {
 myData: {
 key: 'val'
getters: {
 myGetter: state => {
 return state.myData.key.length
actions: {
 myAction ({ commit }, myDataObject) {
 setTimeout(() => {
 commit('myMutation', myDataObject)
 }, 2000)
mutations: {
 myMutation (state, myDataObject) {
 state.myData = myDataObject

How to install Vuex?

Most of the time that you'll be using Vuex will be in larger component based applications where you likely be using a module bundler such as Webpack or Browserify in conjunction with Vueify if you're using single files.

In this case the easiest way to get Vuex is from NPM. Run the command below to install Vuex and save it to your application dependencies.
 npm install --save vuex

Ensure that you load link Vuex with your Vue setup by placing the following line after your require('vue') statement.

Vuex is also available on CDN; you can grab the latest version from cdnjs .


In this page (written and validated by ) you learned about VueJs Vuex . What's Next? If you are interested in completing VueJs tutorial, your next topic will be learning about: VueJs Auto dismissible notifications.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.