如何在其他js文件中使用mixin vuejs变量(常量)？

Question

我尝试在.js项目中使用混合，我可以在vuejs文件中使用常量，但不能在vuejs文件中使用。(我想在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模块中混合这些常量，以便可以将它们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')
}
...