Мутации в модулях vuex

Question

у меня есть два модуля vuex, модуль 'a' и модуль 'b' state находится в модуле 'a', при попытке вызвать в модуле 'b' state в mutations выдает пустой объект, я знаю что если вызывать state в модуле то он вызовит локальный state.

Мне же нужно получить доступ к state другого модуля как это можно сделать ?

модуль а:

export default {
  state: {
    list: [
      {
        name: 'tom',
        age: 32
      },
      {
        name: 'Jorgy',
        age: 19
      }
    ]
  },
  mutations: {
    updateName (state) {
      console.log(state.list)
    }
  },
  actions: {
    show_a ({ commit }) {
      commit('updateName')
    }
  }
}

модуль b

export default {
  state: {
  },
  mutations: {
    updateAge (state) {
      console.log(state.list)
    }
  },
  actions: {
    show_b ({ commit }) {
      commit('updateAge')
    }
  }
}

корневой модуль:

import Vue from 'vue'
import Vuex from 'vuex'
import a from '@/store/modulA'
import b from '@/store/modulB'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    a,
    b
  }
})

Answer 1

Если вы хотите использовать глобальное состояние и геттеры, rootState и rootGetters передаются 3-м и 4-м аргументами в функции геттеров, а также как свойства в объекте context, передаваемом в функции действий.

  someGetter (state, getters, rootState, rootGetters) {
    rootGetters.nameOfModule;
  };

Для запуска действий или совершения мутаций в глобальном пространстве имён нужно добавить { root: true } 3-м аргументом в dispatch и commit.

someAction ({ dispatch, commit }) {
  commit('someMutation', null, { root: true }) // 
  dispatch('someOtherAction', null, { root: true }) // они принимают опцию `root` для вызова в глобальном пространстве имён
}

Взято с https://vuex.vuejs.org/ru/guide/modules.html , можете почитать там поподробнее.

Answer 2

Посмотрите в сторону vuexok.

C vuexok это будет выглядеть так:

Модуль1

import store from '@/store'
import { createModule } from 'vuexok'

export const counterModule = createModule(store, 'counterModule', {
  namespaced: true,
  state: {
    count: 0,
  },
  actions: {
    async increment() {
      counterModule.mutations.plus(1)
    },
  },
  mutations: {
    plus(state, payload:number) {
      state.count += payload
    },
    setNumber(state, payload:number) {
      state.count = payload
    },
  },
  getters: {
    x2(state) {
      return state.count * 2
    },
  },
})

Модуль2

import store from '@/store'
import { createModule } from 'vuexok'
import { counterModule } from '@/store/modules/counterModule'

export const controllerModule = createModule(store, 'controllerModule', {
  namespaced: true,
  state: {
    count: 0,
  },
  actions: {
    async callIncremeny() {
      console.log(counterModule.state.count)
      counterModule.actions.increment()
    },
  },
})

Что бы случайно не сломать что-нибудь рекомендую включить строгий режим vuex

БЛОГ НА HUSL

Мутации в модулях vuex

Ответы (2 шт):