VueJs의 전체 애플리케이션에서 액세스할 수 있는 상수를 만드는 가장 좋은 방법은 무엇입니까?

VueJs의 전체 애플리케이션에서 액세스할 수 있는 상수를 만드는 가장 좋은 방법은 무엇입니까?

내 vuejs 어플리케이션에서 스토어를 통해 상수를 만들 수 있지만 좋은 프랙티스는 아닌 것 같습니다.같은 일을 할 수 있는 다른 방법은 무엇인가?

언제든지 Vue 애플리케이션 범위 외부에 변수를 정의하고 애플리케이션 전체에서 사용할 수 있습니다.

단, Webpack/Browserify 등의 번들러를 사용하고 있는 경우.동일한 작업을 수행할 수 있지만 이를 사용하는 모든 구성 요소로 Import해야 합니다.이에 대한 예는 다음과 같습니다.

//const.js
export default {
   c1: 'Constant 1',
   c2: 'Constant 2'
}

// component.vue
import const from './const';

export default {
  methods: {
    method() {
      return const.c1;
    }
  }
}

다음 방법을 사용할 수 있습니다.

const State= Object.freeze({ Active: 1, Inactive: 2 });
export default {
  data() {
    return {
      State,
      state: State.Active
    };
  },
  methods: {
    method() {
      return state==State.Active;
    }
  }
}

또는

const State= Object.freeze({ Active: 1, Inactive: 2 });
export default {
  data() {
    return {
      State_: State,
      state: State.Active
    };
  },
  methods: {
    method() {
      return state==State_.Active;
    }
  }
}

대신 이걸 써봐

//conts.js
const test = "texte";

export default test

//component.vue
import test from "./conts";

<template>
  <div>
   {{example}}
  </div>
</template>

export default {
  data: function(){
   return {
    example: test
  }
 }
}

가장 작은 빅 솔루션

//helper.js
    
export const Test = {
  KEY1: 1,
  KEY2: 2,
  KEY3: 3,
  KEY4: 4
}

코드 테스트..

//page.vue
import {Test} from "./helper";

<template>
  <div>
   {{testing.KEY2}}
  </div>
</template>

export default {
  data: function(){
   return {
    testing: Test
  }
 }
}

언급URL : https://stackoverflow.com/questions/46882944/what-is-the-best-way-to-create-a-constant-that-can-be-accessible-from-entire-ap