Vuex : 다른 모듈의 액세스 상태


108

나는 액세스하려는 state.session에서 instance.js에서 records_view.js. 이것은 어떻게 이루어 집니까?

store / modules / instance.js

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

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

store / modules / 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
    );
  }
};

이것은 약간의 추가 컨텍스트를위한 것입니다.

store / 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
  }
});

답변:


146

state로컬 상태를 참조 rootState하며 다른 모듈의 상태에 액세스 할 때 사용해야합니다.

let session = context.rootState.instance.session;

문서 : https://vuex.vuejs.org/en/modules.html


16
추가하기 위해 상태가 아닌 getter에 직접 액세스하려는 경우 context.rootGetters와 같은 작업을 수행 할 수도 있습니다.
Brad

정답이지만 위의 답변은 불완전합니다. 아래 게시물은 위에서 참조한 컨텍스트를 작업에 전달하는 방법을 보여줍니다.
Luke F.

46

액션에서 :

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

  },

4
이것이 질문에 답할 수 있지만 코드가 참조와 함께 작동하는 이유에 대한 설명을 제공하는 것이 항상 좋습니다.
Tim Hutchison

초보자에게는 위의 구문이 혼란 스럽습니다. 컨텍스트를 인수로 전달한 다음이를 통해 커밋 및 루트 상태에 액세스하는 것이 좋습니다. 속기는 방향 감각을 잃습니다. 이것은 이해하기 더 쉽습니다. 'contacts : update'(context) {console.log ( 'rootState', context.rootState.users.form) ...... context.commit .......},
Luke F.

1
@LukeF. -이것은 Vuex 문서 에서 한 번만 사용하는 표준 구문 이며 다른 모든 곳에서 사용되는 방식이기도합니다. 액션 문서 를 본 사람이라면 누구나 해체에 대한 설명과 함께 거기에서 그것을 보았을 것입니다.
Dan

과연. 동시에 문서가 명확하다면 우리 중 많은 사람들이 여기에 없을 것입니다. :)
Luke F.

다음은 Vue 문서에서 제공하는 인용보다 더 쉽게 접근 할 수있는 비 구조화에 대한 참조 / 설명입니다 : course.bekwam.net/public_tutorials/… .
Luke F.

8

저에게는 vuex 모듈이 있었지만 다른 파일에서 STATE를 업데이트하려면 돌연변이가 필요했습니다. THIS를 추가하여이를 달성 할 수있었습니다.

모듈에서도 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;
 }
}

흥미 롭군. 이것은 실제로 작동합니다. 이것이 우리가 신뢰할 수있는 문서화 / 지원되는 행동인지 아니면 멋진 해킹인지 궁금합니다. 당분간은 경고가 발생하지 않고 올바르게 작동하기 때문에이 솔루션을 사용하고 있습니다. 감사!
namero999

당신은 또한 사용할 수 있습니다context.commit('user/change_amount', new_amount, {root: true})
Kris

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)
}  

루트의 index.js에서 ModuleA 및 B를 가져와야합니다.

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

이렇게하면 상태 매개 변수가 하위 모듈에서 상호 참조 될 수 있습니다.


-3

gettersession 에서 액세스하려면 다음과 같이 상태 를 정의해야합니다 .

const state = {
  session: ''
}

이 상태 값을 설정하기 위해 작업에서 호출되는 변형 을 작성해야 합니다.


여기에 언급 한 모든 것이 있습니다. 구성 요소 내에서 세션에 액세스 할 수 있지만 다른 Vuex 모듈 (예 : records_view.js)에서 세션에 액세스하는 방법을 잘 모르겠습니다.
Donnie

3
시도 @Donniecontext.rootState.instance.session
Saurabh
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.