在Webpack / vue-loader环境中导入Vue vue时遇到的问题

Question

我有个小问题。在此之前，所有的东西都编译得很好，直到让混合器正常工作为止。当创建一个文件组件并将其全部使用时-没有问题。效果很好。但是，当从外部文件导入混合文件时，它会破坏组件。外部JS甚至位于同一个目录中。

在根/圣人 (webpack + vue-loader)上运行Vue和vuex .

因此，外部文件(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/exports --就在开始<script>标记的上方)。当然，当从组件文件中调用mixin时，变量工作得很好。

mixin本身由所有组件计算的属性组成，因此Chrome中的Vue控制台也为每个属性提供(error during evaluation)。

vuex商店没有出现错误。

没有构建错误。

mixin看起来如下所示，为了简洁起见，忽略了其他对象，但语法正确：

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 {}

在创建一个混合(在外部文件中)之前，该变量可以很好地加载以供重用。当在单个文件组件本身内定义相同的混音时，它也能很好地工作。

是否有一个顺序的加载事件，可能是防止混和看到变量的值？如果混音是先加载的，我就能看出原因了。有办法绕过这事吗？

这是外部文件混合(为了简洁起见，它具有一个计算的属性)：

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实例之外的变量--会使混合器不能正常工作--或者根本不起作用。因此，在将来的情况下，可以通过声明data对象或methods、computed等内部的所有变量来避免这个特定的问题。

所以如果有人有类似的问题。在Vue的导入/导出之前，您是否在开始的<script>标记下面声明变量？这可能破坏了你的混音。

不要在线外画！