programing

Vuex: 다른 모듈에서 액세스 상태

copyandpastes 2022. 7. 7. 23:54
반응형

Vuex: 다른 모듈에서 액세스 상태

접속하고 싶다state.sessioninstance.js부터records_view.js어떻게 하면 될까요?

store/module/module.module.models

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

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

store/syslog/syslog_view.syslogs

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.displaces

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

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

let session = context.rootState.instance.session;

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

액션:

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

  },

저는 vuex 모듈을 사용했지만 다른 파일에서 상태를 업데이트하기 위해 변환이 필요했습니다.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;
 }
}
this.$store.state.instance.session

여기서 "instance"는 모듈 이름이고 "session"은 액세스하려는 Vuex 상태 변수입니다.

제 경우엔 이렇게 작동했습니다.

Module A 파일에 있습니다.js:

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

파일 모듈 B:

export const state = {
    parameterInB: 'B'
 }

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

root의 index.js에서 모듈A와 B를 Import해야 합니다.

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

이렇게 하면 상태 파라미터를 서브모듈에서 상호 참조할 수 있습니다.

두 개의 모듈이 있다고 가정합니다.모듈 A 및 모듈 B

모듈에 접속하는 경우모듈 B에서 A의 상태는 다음과 같습니다.

// inside ModuleB (where there is stateA in ModuleA)
getters: {
        getStateA(state, _, rootState) {
            return rootState.ModuleA.stateA;
        },
    },

정의해야 합니다.session다음과 같은 상태에서 getter에서 액세스하려면 다음과 같이 하십시오.

const state = {
  session: ''
}

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

언급URL : https://stackoverflow.com/questions/41366388/vuex-access-state-from-another-module

반응형