Проблемы с импортом миксов Vue в среду Webpack / vue-loader

Question

У меня небольшая проблема. До этого момента все компилировалось нормально, пока не попытались заставить миксины работать должным образом. При создании и использовании всего этого в рамках одного файлового компонента - нет проблем. Работает отлично. Но при импорте миксина из внешнего файла он разбивает компонент. Внешний JS находится даже в том же каталоге.

Запуск Vue и vuex на Roots / Sage (webpack + vue-loader).

Таким образом, внешний файл (slideBase.js) выглядит примерно так:

export const slideBase = {
  // mixin here
};

Я тоже пробовал:

export default {
  // mixin here
}

В одном компоненте файла:

<script>
  import { slideBase } from './slideBase.js'
  export default {
    name: 'slide-half-2',
    mixins: [slideBase],
    data() {
      ...
</script>

Кто-нибудь еще сталкивался с проблемами с миксином или знает, что может происходить?

Приветствия

---

Редактировать: Консоль возвращает ошибку, в которой говорится, что одна из моих переменных не определена (помещается над vue import / export s - чуть выше начального тега <script>. Переменные Конечно, работал нормально при вызове mixin из файла компонента.

Сам миксин включает в себя все вычисленные свойства компонентов - и, следовательно, консоль Vue в Chrome также дает (error during evaluation) для каждого из свойств.

Магазин vuex не показывает ошибок.

Нет ошибок сборки.

Миксин выглядит следующим образом, для краткости оставлены другие объекты, но правильный синтаксис:

export const slideBaseTest = {
  computed: {
    BackToMulti() {
      if (typeof this.$store.state.slideInfo[prevSlideNumber] === 'undefined') {
      } else {
          if (this.$store.state.slideInfo[prevSlideNumber].thisSlideMulti == 'true') {
            return 'back-to-multi'
        } else {}
      }
    }
};

---

Редактировать 2: Возможно, я нашел проблему, но не знаю, как ее решить:

В консоли отображается неопределенная переменная prevSlideNumber. Это определяется в одном компоненте файла чуть ниже открывающего тега:

  const slideNumber = 2;

  var prevSlideNumber = slideNumber - 1;
  if (slideNumber == 'home') {
      var prevSlideNumber = 0;
  } else {}

Переменная отлично загружается перед созданием миксина (во внешнем файле) для повторного использования. Он также отлично работает при определении одного и того же миксина внутри одного компонента файла.

Существует ли порядок загрузки событий, который может мешать миксину видеть значение переменной? Если миксин загружается первым, я могу понять, почему. Есть ли способ обойти это?

Это внешний файл mixin (для краткости с одним из вычисленных свойств):

export default {
  computed: {
    BackToMulti() {
      if (typeof this.$store.state.slideInfo[prevSlideNumber] === 'undefined') {
      } else {
          if (this.$store.state.slideInfo[prevSlideNumber].thisSlideMulti == 'true') {
            return 'back-to-multi'
        } else {}
      }
    }
  }
};

Большое спасибо. =)

Answer 1

Оказывается, что объявление свободно плавающих переменных, то есть переменных вне экземпляра Vue, препятствовало правильной работе mixins - или вообще . Так что этой конкретной проблемы можно избежать в будущем, объявив все переменные внутри объекта data или внутри methods, computed и т. Д.

Так что, если у кого-то есть подобная проблема ... Вы объявляете переменные ниже начального тега <script>, до импорта / экспорта Vue? Это может сломать ваш миксин.

Нет чертежа вне линий!