[Vuejs]-Vuex, Is nested mutations / actions is possible?

you can use vuex module system and put each module in its own .js file, here is the documentation for it:

vuex modules

for short you can have a file called user.js and in it you’ll have:

export const state = () => ({
   // user related states
});

export const mutations = {
   // user related mutations
};

export const actions = {
  // user related actions
};

export const getters = {
  // user related getters
};

then you can dispatch an action from component like this:

this.$store.dispatch('user/someAction', payload);

and access the states in your component like:

import { mapState } from 'vuex';
...
computed: {
  ...mapState('user', ['stateNameOne', 'stateNameTwo']),
}

and so on…

also for the mutations when all they’re doing is setting a value to a state I’d like to write only one mutation like this:

SET(state, { key, value }) {
  state[key] = value;
}

now I have only one mutation and in its payload I specify which state I want to update using key and my commit would be like this:

commit('SET', { key: 'stateName', value: stateValue });

here is an article for further information about this topic:

modules in vuex

Edit

when you are separating each vuex module in its own .js file you have two alternate syntax:

option 1: Exporting constants

for example in this directory: /store/store.js you’ll have:

import * as name from '@/store/modules/name.js'

and in the module file in this directory: /store/modules/name.js you’ll have:

export const state = { ... } 
export const mutations = { ... }
export const actions = { ... }
export const getters = { ... }

Option 2: Exporting one Object

in /store/store.js:

import name from '@/store/modules/name.js'

in /store/modules/name.js:

export default {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... },
}

in both cases your main vuex file can use the imported module like this:

export default new Vuex.store({
  modules: {
    name
  },
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... },
}) 

I didn’t find anything on vuex documentation to reflect what you’re trying to do like nested actions and …

I think the only option here is to separate each module in its own file using one of the options mentioned above and then import them in the main vuex file