[Vue.js / Vuex] 전역상수

어디서나 참조할 수 있는 전역상수를 만들어보자.

 

// src/constants.ts
export default Object.freeze({
    COUNTRY: "KOREA",
    NAME: "WITHHAM"
})

새로운 파일을 만들어서 위와 같이 작성한다.

위 파일에 상수들을 모아둔다.

 

// src/index.ts
import constants from "./constants";
 
let v = new Vue({
    // 생략
    template: `
    <div>
        <h1>{{CONSTANTS.COUNTRY}}</h1> // 추가 
    </div>`,
 
    // 추가
    data:{
        CONSTANTS: constants
    }
});
 

루트 컴포넌트에서 data로 작성한 constants를 CONSTANTS 변수에 넣어준다.

 

실행 결과.

---

이때까지 상수를 만들었다.

이렇게 만든 CONSTANTS 상수는 component에 종속적이다.

즉, src/index.ts 컴포넌트에서 다른 컴포넌트를 임포트한다면 임포트한 컴포넌트에서 CONSTANTS를 사용하려면 또 다시 data 변수를 하나 만들고 src/constants.ts를 임포트해서 데이터를 세팅시켜 줘야한다.

 

컴포넌트 내에서만 사용되는 상수가 아니라 SPA 전체에서 사용하고자 하는 상수라면 전역변수화 시켜줄필요가 있다.

즉, 한 번의 임포트로 다른 컴포넌트에서도 접근이 가능해야 한다.

 

이럴때 유용한게 Vuex 이다. 

Vuex는 store 옵션으로 의해 하위 컴포넌트에서도 넣어준 저장소에 접근이 가능하다.

즉, 루트 컴포넌트에서 저장소를 넣어준다면 모든 컴포넌트에서 접근이 가능하다.

 

vuex 설치

npm i vuex --save

 

vuex로 전환

// src/store.ts
import Vue from "vue";
import Vuex from "vuex";
import constants from "./constants";
 
Vue.use(Vuex);
 
export const store = new Vuex.Store({
    state:{
        constants: constants
    },
    getters: {
        CONSTANTS: state => {
          return state.constants
        }
    }
});

위와 같이 store.ts 파일을 만든다.

state 안에 있는 constants가 데이터가 되고

getters가 접근자 함수가 된다.

즉, getters에 정의한 CONSTANTS가  getters 함수이름이 되고 해당 함수는 state의 constants를 반환해준다.

// src/index.ts
 
// import constants from "./constants";
import {store} from './store'; // 추가
 
let v = new Vue({
    template: `
    <div>
    <!-- <h1>{{CONSTANTS.COUNTRY}}</h1> -->
    <h1>{{$store.getters.CONSTANTS.COUNTRY}}</h1>
    </div>`,
    data:{
        // CONSTANTS: constants
    },
    store // 추가
});

index.ts는 위와 같이 변경한다.

$store.getters.CONSTANTS.COUNTRY 로 constants.ts 파일의 COUNTRY 데이터를 가져온다.

---

이제 루트 컴포넌트에서 다른 컴포넌트를 추가(추가한 컴포넌트가 하위 컴포넌트가 된다.)해서 해당 컴포넌트에서도 store로 데이터를 가져올 수 있는지 테스트해보자.

 

// src/index.ts
 
import Index from "./components/Index"; // 추가
 
let v = new Vue({
    el: "#app",
    template: `
    <div>
    <!-- <h1>{{CONSTANTS.COUNTRY}}</h1> -->
    <h1>시작 : {{$store.getters.CONSTANTS.COUNTRY}}</h1>
    <Index/> // 하위 컴포넌트 추가
    </div>`,

 

루트 컴포넌트는 위와 같이 Index 컴포넌트를 하위 컴포넌트로 추가해준다.

 

// src/components/Index/Index.html
 
<div>
    <h2>Index : {{$store.getters.CONSTANTS.COUNTRY}}</h2>
    <Test1></Test1> // 하위 컴포넌트 추가
</div>

추가한 Index 컴포넌트의 template은 위와 같이 적는다.

하위 컴포넌트인 Index에도 Test1 하위 컴포넌트를 추가해보자.

 

// src/components/Index/Index.html
 
<div>
    <h3>Test1 : {{$store.getters.CONSTANTS.COUNTRY}}</h3> 
</div>

Test1 하위 컴포넌트는 위와 같이 적어주자.

 

즉, 루트 컴포넌트는 Index 컴포넌트를 하위 컴포넌트로 가지고

Index 컴포넌트는 Test1 컴포넌트를 하위 컴포넌트로 가지고 있다.

결과.

루트 컴포넌트에서만 store를 추가함으로써 다른 하위 컴포넌트에서도 모두 store에서 상수를 잘 가져오는 것을 확인할 수 있다.

 

참고 깃허브

---

 

참고 

best way to define common constants in vue.js

Vuex.js