глобальное определение не работает в vue.js

Question

Я попытался импортировать и определить библиотеку глобально, как показано ниже, но каким-то образом она не распознает глобальную переменную.

в main.js,

import Vue from 'vue'
import App from './App'
import router from './router'
import VueJwtDecode from 'vue-jwt-decode'

Vue.config.productionTip = false
Vue.use(VueJwtDecode)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

в Registration.vue,

...
const payload = VueJwtDecode.decode(res.jwt);
...

и ошибка показывает, что VueJwtDecode не определен.

Answer 1

Если вы пытаетесь использовать именованную ссылку VueJwtDecode, вам нужно повторно импортировать библиотеку в свой компонент Registration.vue, так как Registration.vue не понимает, что означает VueJwtDecode.

import VueJwtDecode from 'vue-jwt-decode'
const payload = VueJwtDecode.decode(res.jwt);

Однако, поскольку вы глобально установили библиотеку, она была установлена ​​в экземпляр Vue, что означает, что она доступна из контекста this вашего компонента. В результате вы также можете получить к нему доступ из контекста компонента без повторного импорта:

const payload = this.$jwtDec(res.jwt);

Answer 2

Как документ , в вашем компоненте необходимо использовать

this.$jwtDec(res.jwt)

вместо

VueJwtDecode.decode(res.jwt);