Question

我遇到一个小问题。在此之前，一切都可以正常编译，直到尝试使mixins正常工作为止。创建一个文件并在单个文件组件中全部使用时-没问题。效果很好。但是，当从外部文件导入mixin时，它将破坏组件。外部JS甚至位于同一目录中。

在Roots/Sage（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>

还有其他人遇到混入问题，或者知道会发生什么情况？

干杯

编辑：控制台返回一个错误，提示我的变量之一未定义（位于import / export s上方–刚好位于{{ 1}}标签。从组件文件中调用mixin时，变量当然可以正常工作。

mixin本身包含所有组件计算的属性-因此，Chrome中的Vue控制台也为每个属性提供了<script>。

vuex存储没有显示错误。

没有构建错误。

mixin看起来像这样，为简洁起见，其他对象则省略了，但是语法正确：

(error during evaluation)

编辑2：我可能已经找到了问题，但不知道如何解决：

控制台中显示的未定义变量是prevSlideNumber。这是在开始标记下方的单个文件组件中定义的：

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

在创建用于重新使用的混合（在外部文件中）之前，该变量加载良好。在单个文件组件本身中定义相同的mixin时，它也可以正常工作。

加载事件的顺序是否可能使mixin看不到变量的值？如果mixin首先加载，我会明白为什么。可以解决这个问题吗？

这是外部文件混合（为简洁起见，具有计算的属性之一）：

  const slideNumber = 2;

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

非常感谢。 =）

Answer 1

事实证明，声明自由浮动变量-也就是说，Vue实例外部的变量使mixins无法正常工作-或根本没有。因此，在以后的情况下，可以通过声明data对象内部或methods，computed等内部的所有变量来避免此特定问题。

因此，如果有人遇到类似的问题...在Vue的导入/导出之前，您是否在开始<script>标记下声明变量？这可能会破坏您的混音。

没有画线！

无法将Vue mixins导入Webpack / vue-loader环境

1 个答案: