Javascript 通过计算属性在组件中包含库

当我试图在Vue模板文件中调用

{mustache syntax}

中的

lodash

或

momentjs

等库时，我会不断得到

'undefined property'

错误，即使它们绑定到

窗口

对象

为了解决这个问题，我将库导入到我的组件中，然后返回计算属性中的对象，如中所示：

import _ from 'lodash';

export default {
    computed: {
        _() { return _; }
    }
}

---

这是处理这个问题的好办法吗？建议的方法是什么？通过计算属性而不是方法来处理它有什么缺点吗？

基本上，是的，创建一个

计算的
属性是一种方法

但你有一些替代方案可以让事情变得更简单

A是一个很好的选择，它只需要很少的代码：


Vue.mixin({
计算：{
window（）{return window；}
}
})
新Vue({
el:“#应用程序”
})

{{window.location.host}

我建议将所有逻辑移到compute属性。这使您的代码更干净、可读性更强

将组件视为MVC，其中模板是视图，组件对象是控制器，属性和计算属性是模型。你没有把逻辑放在视图层，对吗

所以不是

<template>
  <div>
   {{ _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x') }}
  </div>
</template>

export default {
    computed: {
        _() { return _; }
    }
}


{{{.differenceBy（[{'x'：2}，{'x'：1}]，{'x'：1}]，'x'）}
导出默认值{
计算：{
_（）{return}
}
}

大概是这样的：

<template>
  <div>
   {{ diff1 }}
  </div>
</template>

export default {
    computed: {
        diff1: _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x'),
    }
}


{{diff1}}
导出默认值{
计算：{
diff1:u0.differenceBy（[{'x'：2}，{'x'：1}]，{'x'：1}]，'x'），
}
}
感谢您建议使用global Mixin。我认为，在我的特定用例中，它甚至比将库加载到计算属性更合适。在我的例子中，我使用lodash和moment进行格式化，因此这不是真正的应用程序逻辑（我的错，我的问题中没有包含此信息）。但我同意你的观点——如果是更复杂的逻辑，它就不属于模板。