Не удается получить доступ к компоненту Buefy внутри .beforeEach ()

Я пытаюсь получить доступ к компоненту Toast из Buefy, чтобы отображать ошибку каждый раз, когда кто-то пытается получить доступ к представлению только для аутентификации:

// ...
import { Toast } from 'buefy/dist/components/toast'

router.beforeEach((to, from, next) => {
  // ...
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!(store.state.isAuth)) {
      Toast.open({
        message: "Not authorized"
      });
      next({
        path: '/login/',
      })
    } else {
      next()
    }
  } else {
    next()
  }
}

но Toast не определено, я импортировал Buefy и написал Vue.use(Buefy).

Как я могу решить эту проблему и получить доступ к Toast здесь. Заранее спасибо.


person yierstem    schedule 21.09.2018    source источник
comment
Возможно, я неправильно понимаю, но не следует ли вам также делать Vue.use(Toast), поскольку вы импортируете его по имени?   -  person skribe    schedule 21.09.2018
comment
Я не могу использовать Vue.use(Toast), это дает мне Cannot read property 'install' of undefined, поскольку Toast - неопределенная переменная. Проблема в том, что я не могу правильно импортировать Toast компонент.   -  person yierstem    schedule 21.09.2018
comment
Я никогда раньше не использовал Buefy, но беглый взгляд на него показывает, что вы должны использовать синтаксис для экспорта по умолчанию. т.е. import Toast from 'buefy/dist/components/toast', а не именованный импорт с использованием фигурных скобок {Toast}   -  person skribe    schedule 21.09.2018


Ответы (1)


Я решил проблему.

Я получил метод $ toast от Vue.prototype.$toast, так как загрузил его с помощью Vue.use(Buefy).

Спасибо за внимание.

person yierstem    schedule 21.09.2018
comment
Хорошо, просто обратите внимание на будущее, что есть разница между тем, как вы импортируете модули ES6, если у них есть именованный экспорт, или если они используют экспорт по умолчанию. Компоненты Buefy определенно используют значения по умолчанию. Таким образом, вы импортируете без фигурных скобок и с любым именем. например, import CoolToast from .... также будет работать. - person skribe; 21.09.2018
comment
P.S. Если у вас возникнут сомнения, посмотрите на импортируемый модуль. github.com/buefy/buefy/blob/dev/ src / components / toast / Toast.vue Вы увидите, что он использует два экспорта по умолчанию из других компонентов, а сам он использует экспорт по умолчанию. Модуль с именованным экспортом будет выглядеть как export const Toast = 'something' - person skribe; 21.09.2018
comment
Я уже пытался импортировать напрямую, без фигурных скобок, хотя безуспешно, но я ценю совет, спасибо. - person yierstem; 21.09.2018