将 Vue mixins 导入 Webpack/vue-loader 环境时遇到问题

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>

其他人运行遇到混合问题，或者知道可能发生了什么？

干杯，

编辑：控制台returns报错说我的一个变量未定义（放在vue上面import/export s -- 就在开始的 <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 首先加载，我就能明白为什么了。有什么解决办法吗？

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

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 实例外部的变量会阻止 mixin 正常工作——或根本。因此，在将来的情况下，可以通过在 data 对象内或 methods、computed 等

内声明所有变量来避免这个特定问题

所以，如果有人有类似的问题...您是否在 Vue 的 imports/exports 之前的开始 <script> 标记下方声明变量？这可能会破坏您的混合。

不画线外！

将 Vue mixins 导入 Webpack/vue-loader 环境时遇到问题

Trouble importing Vue mixins into Webpack / vue-loader environment

webpack

vue.js

roots-sage

vue-loader

vuex