vuejs中如何隔离可复用的小函数

Question

我有一个函数，可以说生成一个用于生成令牌的随机字符串。我有这个功能，我methods:{}在我的 div 中使用它没有任何问题。

但是我试图将这个函数放在它自己的单独文件中，以便我可以导入它以备将来使用，所以我将一个functions.js文件放入我的文件中，src如下所示：

// /src/functions.js
export default {
    // generate tokes
  tokenGenerator () { ... }

}

在我中，src/components/foo.vue我正在导入此文件（导入没有问题）

<template>
 <div> {{ tokenGenerator }} </div>
</template>

<script>
import tokenGenerator from '../../functions'
export default {
   data() {
      return ;
   }
}
</script>

这应该工作，但它没有。导入不是问题，而是其他问题.. 控制台错误显示它找不到函数 tokenGenerator

Answer 1

一方面，您似乎试图导入单个函数，但tokenGenerator在您的代码中是对functions文件中导出的整个对象的引用。

其次，您无法使用 Vue 插值访问普通的 javascript 函数{{ ... }}。模板只能引用定义为相关 Vue 实例上的方法的函数。

您可以使用 mixin 来执行您想要的操作：

// /src/functions.js
export default {
  methods: {
    // generate tokens
    tokenGenerator () { ... }
  }
}

<template>
  <div>{{ tokenGenerator }} </div>
</template>

<script>
import mixinFuncs from '../../functions'
export default { 
   mixins: [ mixinFuncs ],
}
</script>

这是有关 mixins 的文档。

如果您只需要访问tokenGeneratorVue 脚本中的函数，那么您可以直接将其导出并导入：

// /src/functions.js
// generate tokens
export const tokenGenerator = () => { 
  //... 
}

<template>
  <div> {{ token }} </div>
</template>

<script>
import { tokenGenerator } from '../../functions'

export default {
  data() {
    return {
      token: tokenGenerator()
    }
  }
}
</script>

这是一个工作示例。