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.
async getLineWorkOrders({ rootState, commit }, payload) { try { let response = await axios.
post( 'api.
factory.
com/getLineWorkOrders', Object.
assign({}, payload.
body, { language: rootState.
authStore.
currentLocale.
locale }), rootState.
config.
serviceHeaders ); commit( 'setCurrentWorkOrderNumber', response.
data.
currentWorkOrderNumber ); return response.
data; } catch (error) { throw error; }},In this action, we fetch data from our backend API by hitting the endpoint ‘api.
factory.
com/geteLineWorkOrders’.
After the data is retrieved, the state variable currentWorkOrder is updated.
Finally, the data is returned to the component that made the call.
All our actions have this format.
To refactor it into a single action we need to have the endpoint, whether or not to send payload and whether or not to commit data.
Here is our refactored single action:async fetchData({ rootState, commit }, payload) { try { let body = { language: rootState.
authStore.
currentLocale.
locale }; if (payload) { body = Object.
assign({}, payload.
body, body); } let response = await axios.
post( `api.
factory.
com/${payload.
url}`, body, rootState.
config.
serviceHeaders ); if (payload.
commit) { commit('mutate', { property: payload.
stateProperty, with: response.
data[payload.
stateProperty] }); } return response.
data; } catch (error) { throw error; }}This single action will handle every possible call.
If we need to send data with the API call it does.
If we need to commit data it does.
If it does not need to commit data, it does not.
It always returns data to the component.
Using one mutationPreviously for every action that needed to mutate state, we created a new mutation to handle this.
We replaced them all with a single mutation.
Here is our single mutation:const mutations = { mutate(state, payload) { state[payload.
property] = payload.
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.
com.