javascript - vuejs中如何隔离可重用的小函数

Question

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

但是我想把这个函数放在它自己的单独文件中，这样我就可以导入它以供将来使用，所以我在我的 src 中放了一个 functions.js 文件像这样:

// /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>

Here's the documentation on mixins.

---

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

// /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>

Here's a working example.