Why all my Vuex stores have just one action and mutation and why yours should too

Why all my Vuex stores have just one action and mutation and why yours should tooJennifer BlandBlockedUnblockFollowFollowingApr 12Photo by Photos by Lanty on UnsplashAs the size of your Vue application grows, the number of actions and mutations in your Vuex store grows too.

Let me show you how to reduce this to something more manageable.

What is VuexVuex is a state management pattern + library for Vue.

js applications.

It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

How we are using VuexWe are using Vuex to share state between all the applications in our Factory Core Framework application.

Since the framework is a bundle of applications, we currently have nine Vuex stores.

Each store has its own state, actions, and mutations.

We are using actions in the store to do API calls to the backend.

Once the data is returned we use mutations to store it in state.

This allows any component to access that data.

As you can imagine, our stores can have a very large number of actions to handle these API calls.

Here is an example of all the actions in one of our Vuex stores.

This store has 16 actions.

Now imagine how many actions our Factory Core Framework has in total if we have 9 stores!Simplifying our ActionsAll our actions basically perform the same functionality.

Every action does the following:fetch data from API (include payload if necessary)(optionally) store data in statereturn response to the component that called the actionTo refactor these into a single action, we needed to know if the action needed to know:an endpoint to hitto send payload in the API call or notto commit data to state or not, and if so, to which state variableOur current actionHere is an example of one of our actions.

with; }};If an action needs to store data in state, we call this mutation like this:commit('mutate', { property: <propertyNameHere>, with: <valueGoesHere>});ConclusionWe have greatly simplified our actions and mutations in our stores by having just one action and one mutation.

Other Articles You Might Like To ReadHere are some other articles that I have written that you might like to read.

How to build a Single Page Application using Vue.

js, Vuex, Vuetify, and FirebaseHow to install Vue and build an SPA using Vuetify and Vue Routermedium.

freecodecamp.

orgHow to Reduce Your Vue.

JS Bundle Size With WebpackI work on the Industry 4.

0 team at Stanley Black & Decker.

Our team recently created the equivalent of an App Store for…medium.

comHow to Add Charts and Graphs to a Vue.

js ApplicationQuick Guide to using echarts and vue-echartsmedium.

freecodecamp.

orgHow to add Internationalization to a Vue Application¡Hola!.Bonjour.

Ciao.

你好.

Here is how you add internationalization to Vue.

medium.

freecodecamp.

orgCreating Custom Directives in Vue.

jsDirectives are special attributes with the v- prefix.

A directive’s job is to reactively apply side effects to the DOM…medium.