Vuex: состояние доступа из другого модуля

100

Я хочу , чтобы получить доступ state.sessionв instance.jsс records_view.js. Как это достигается?

магазин / модули / instance.js

const state = {
  // This is what I want to access in records_view.js
  session: {}
};

const getters = {
  sessionGetter: state => state.session
};

магазин / модули / records_view.js

const actions = {
  getSettingsAction (context, props) {
    // This is how I'm trying to access session, which doesn't work
    let session = context.state.instance.session;

    Api(
      context,
      {
        noun: props.noun,
        verb: 'GetRecordsViewSettings',
        orgUnitKey: _.has(session, 'orgunit.key') ? session.orgunit.key : '',
        data: {}
      },
      props.callback
    );
  }
};

Это для небольшого добавления контекста.

магазин / index.js

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import * as types from './mutation-types';

import instance from './modules/instance';
import recordsView from './modules/records_view';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations,
  modules: {
    instance,
    recordsView
  }
});
Донни
источник

Ответы:

139

stateссылается на локальное состояние и rootStateдолжен использоваться при доступе к состоянию других модулей.

let session = context.rootState.instance.session;

Документация: https://vuex.vuejs.org/en/modules.html

Донни
источник
14
просто чтобы добавить, вы также можете делать такие вещи, как context.rootGetters, если вы хотите напрямую получить доступ к геттеру, а не к состоянию.
Брэд
Хотя приведенный выше ответ является правильным, он является неполным. В сообщении ниже показано, как передать контекст, указанный выше, в действие.
Люк Ф.
43

из действия:

'contacts:update' ({ commit, rootState }) {
    console.log('rootState', rootState.users.form)
    ......

  },
Тибо Ван Кампенхудт
источник
4
Хотя это может дать ответ на вопрос, всегда полезно дать объяснение, почему код работает со ссылками.
Тим Хатчисон
Для новичков приведенный выше синтаксис сбивает с толку. Лучше передать контекст в качестве аргумента, а затем через него получить доступ к фиксации и корневому состоянию. Стенография сбивает с толку. Это легче понять: 'contacts: update' (context) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},
Люк Ф.
@LukeF. - Это стандартный синтаксис, который используется в документации Vuex только один раз, а также то, как он используется почти везде. Любой, кто смотрел документацию по действиям , увидит это там вместе с приведенным там объяснением деструктуризации.
Дэн
На самом деле. В то же время многие из нас не были бы здесь, если бы документация была ясной. :)
Люк Ф.
Вот также ссылка / объяснение деструктуризации, более доступная, чем ссылка, предоставленная в документации Vue: курсы.bekwam.net/public_tutorials/… .
Люк Ф.,
7

Для меня у меня были модули vuex, но мне нужна была мутация, чтобы обновить STATE в другом файле. Смог добиться этого, добавив ЭТО

Даже в модуле вы можете увидеть, к какому глобальному состоянию у вас есть доступ через console.log (this.state)

const mutations = {
MuteChangeAmt(state, payload) {
//From user module; Need THIS keyword to access global state
this.state.user.payees.amount = payload.changedAmt;
 }
}
Дэн Кайзер
источник
2

В моем случае у меня это сработало так.

В файле ModuleA.js:

Module A:  
export const state = {
    parameterInA: 'A'
 }
export const action = {
    showParameterB() {
    console.log("Parameter B is: " + this.state.B. parameterInB)
}

В файле ModuleB:

export const state = {
    parameterInB: 'B'
 }

export const action = {
    showParameterA() {
    console.log("Parameter A is: " + this.state.A.parameterInA)
}  

Вам нужно будет импортировать ModuleA и B в index.js для корня:

import * as A from 'ModuleA.js'  
import * as B from 'ModuleB.js'

Таким образом, на параметр состояния можно ссылаться во вложенных модулях.

us_david
источник
-3

Вам нужно определить sessionв своем состоянии следующее, чтобы получить к нему доступ в ваших геттерах :

const state = {
  session: ''
}

Вы должны написать мутацию , которая будет вызываться из ваших действий для установки этого значения состояния.

Саураб
источник
У меня есть все, что вы здесь упомянули. Я могу получить доступ к сеансу из компонента, но я не уверен, как получить доступ к сеансу из другого модуля Vuex (например, records_view.js).
Донни
3
@Donnie попробоватьcontext.rootState.instance.session
Saurabh