0

我有一个小问题。到目前为止，一切都编译得很好，直到试图让 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>

还有其他人遇到 mixin 问题，或者知道可能发生了什么吗？

干杯，

编辑：控制台返回一个错误，指出我的一个变量未定义（放置在 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 {}

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

是否有加载事件的顺序可能会阻止 mixin 看到变量的值？如果首先加载 mixin，我可以看到原因。有什么办法吗？

这是外部文件 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 {}
      }
    }
  }
};

非常感谢。= )

4

1 回答 1

0

事实证明，声明自由浮动变量——也就是说，Vue 实例之外的变量会阻止 mixin 正常工作——或者根本就没有。data因此，在将来的情况下，可以通过在对象内部或内部methods,computed等声明所有变量来避免这个特定问题。

所以如果有人有类似的问题......你是否在开始<script>标签下方声明变量，在 Vue 的导入/导出之前？这可能会破坏你的 mixin。

线外不画！

于 2019-03-19T05:26:39.663 回答