Как использовать переменные mixin vuejs (константы) в других js файлах?

Question

Я пытался использовать миксины в проекте vuejs, и я мог использовать константы в. vue файлах, но не в. js файлах. (Я хотел бы определить константы в файле myMixin. js, потому что он также используется в файле vue.)

// myMixin.js

const ROLES = {
  admin: 'ADMIN'
},
const OPTIONS = {
  ...
}

export default {
  data() {
    return {
      ROLES: ROLES,
      ...
    }
  }
}

// main.js

import myMixin from '@/common/myMixin' 
...

Vue.mixin(myMixin)
...

// router.js

...
if(store.state.account.role !== ROLES.admin) { // ROLES.admin: NOT WORKING HERE.
   next('/403')
}
...

// Header.vue

<template>
  <v-list-group
    :value='false'
    no-action
    v-if='$store.state.account.role === ROLES.admin'   // working perfectly

...
</template>

Answer 1

Вы должны export эти константы из модуля mixin, чтобы вы могли import использовать их в других простых JavaScript модулях.

// myMixin.js

export const ROLES = {
  admin: 'ADMIN'
}

export const OPTIONS = {
  ...
}

export default {
  data() {
    return {
      roles: ROLES,
      ...
    }
  }
}

// router.js

import { ROLES } from './myMixin.js'

...
if (store.state.account.role !== ROLES.admin) {
  next('/403')
}
...

Если вам не нравится Идея импортировать константы в каждый модуль, затем вы можете назначить их в глобальный контекст (window), который сделает их доступными глобально, но это в первую очередь противоречит цели использования модулей, и я не рекомендую это.

// myMixin.js

window.ROLES = {
  admin: 'ADMIN'
}

window.OPTIONS = {
  ...
}

Answer 2

Я решил это, но я не уверен, что это правильный путь. Пожалуйста, поделитесь со мной, если у вас есть лучшие идеи.

// router.js

import myMixin from '@/common/myMixin'

console.log(myMixin.data().ROLES.admin)   // 'ADMIN'
if(store.state.account.role !== myMixin.data().ROLES.admin) {
   next('/403')
}
...