source

Vuex 스토어 모듈 상태에서 'this'에 액세스하는 방법

manycodes 2022. 11. 15. 21:34
반응형

Vuex 스토어 모듈 상태에서 'this'에 액세스하는 방법

예를 들어 다음과 같은 "store" 디렉토리가 있다고 가정합니다.

...
store
├── auth
│   └── user.js
└── index.js
...

index.displaces를 표시합니다.

import Vue from 'vue';
import Vuex from 'vuex';
import {user} from './auth/user';

Vue.use(Vuex);

/* eslint-disable no-new */
const store = new Vuex.Store({
  modules: {
    user
  },
});

export default store;

현재,user저장 일부 상수와 기타 상태 변수가 있습니다.state소품. 어떻게 하면state소품들 자체에서요?예를들면user스토어는 다음과 같습니다.

user.displaces

export const user = {
  namespaced: true,

  state: {

    // hardcoded string assigned to user.state.constants.SOME_CONST
    constants: {
      SOME_CONST: 'testString'
    },

    // Another property where I would like to reference the constant above

    someOtherStateProp: {

      // Trying to access the constant in any of these ways throws
      // 'Uncaught ReferenceError: .... undefined'
      // Where '...' above is interchangeable with any root I try to access the constant from (this, state etc)

      test1: this.state.constants.SOME_CONST,
      test2: user.state.constants.SOME_CONST
      test3: state.constants.SOME_CONST
      test4: constants.SOME_CONST
      test5: SOME_CONST
      // .... etc. All the above throw ReferenceError's 
    }
  }
};

참조 방법user.state.constants.SOME_CONST부터user.state.someOtherStateProp.test1?

뭔가 아주 근본적인 걸 놓치고 있는 것 같아

가장 간단한 방법은 선언하는 것입니다.CONSTANTS모듈을 내보내기 전 오브젝트 및 다음과 같이 인식합니다.

const CONSTANTS = {
    SOME_CONST: 'testString'
}

export const user = {
  namespaced: true,

  state: {

    // hardcoded string assigned to user.state.constants.SOME_CONST
    constants: CONSTANTS,

    // Another property where I would like to reference the constant above

    someOtherStateProp: {


      test1: CONSTANTS.SOME_CONST,
    }
  }
}; 

이 작업은 두 가지 단계로 수행할 수 있습니다.

let user = {
    namespaced: true,
    state: {
        SOME_CONST: 'testString'
    }
};

Object.assign(user, {
    state: {
        someOtherStateProp: {
            test1: user.state.SOME_CONST
        }
    }
});

export default user;

자세한 것은 이쪽Object.assign여기 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

언급URL : https://stackoverflow.com/questions/47652862/how-to-access-this-in-vuex-store-module-state

반응형