Javascript 如何在vuejs中隔离可重用的小函数

我有一个函数，可以生成一个随机字符串来生成令牌。我在

方法中有这个函数：{}

并且在div中使用它没有任何问题

但我正试图将此函数放在它自己的单独文件中，以便我可以导入它以供将来使用，因此我将一个

functions.js

文件放在我的

src

中，如下所示：

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

}

在我的

src/components/foo.vue

中，我正在导入此文件（导入时没有问题）

{{tokenGenerator}}
从“../../functions”导入令牌生成器
导出默认值{
数据（）{
返回；
}
}

---

这应该行得通，但不行。导入不是问题，而是其他问题。。控制台错误显示它找不到函数tokenGenerator

，例如，您似乎试图导入单个函数，但代码中的

tokenGenerator

引用了在

函数

文件中导出的整个对象

其次，不能使用Vue插值

{{…}}

访问普通javascript函数。该模板只能引用定义为相关Vue实例上的方法的函数

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

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

{{token}}
从“../../functions”导入{tokenGenerator}
导出默认值{
数据（）{
返回{
令牌：令牌生成器（）
}
}
}

---

在functions.js中以这种方式导出它：

export class util {
    static tokenGenerator() {
       //do your stuff here
    }
}

在foo.vue中：

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

<script>
import { util } from '../../functions';

export default {
  data() {
    return {
       textData: util.tokenGenerator
    }
  } 
}
</script>

{{tokenGenerator}}
从“../../functions”导入{util}；
导出默认值{
数据（）{
返回{
textData:util.tokenGenerator
}
} 
}

您可以这样做，但您可能希望设置一个方法而不是数据属性，并且您仍然无法在模板中引用

tokenGenerator

。这已经足够接近了，但正如我在第二个答案的评论中提到的，我认为有一个更好的替代方案，我不认为混合是唯一的方法。如果您看到这个vuejs代码，您可以在这个文件（第一行和最后一行）中看到，它是按照我所展示的方式导入的。当有更简单更好的选项可用时，我不想使用mixin。感谢您的回答，尽管该示例在Vue实例的方法中使用了来自导入对象的函数。如果这就是你想要做的，那么是的，你完全可以导入函数并在脚本中使用它（参见我的编辑）。但是，如果您试图在模板中使用该函数，则需要将其设置为Vue实例的方法或属性，最简单的方法是通过mixin（尽管您也可以执行类似于Kumar_14的回答中的操作）.@hidar mixin是VUEJ的一种强大模式，值得花时间学习如何使用它们。很抱歉，取消了已接受的标记，但我今天刚刚尝试了你的答案，但它不起作用。我说的是第二个例子。I get

vue.esm.js:434[vue warn]：属性或方法“token”未在实例上定义，而是在渲染期间引用。确保在数据选项中声明被动数据属性。

error。。也许武伊特已经发生了一些变化，这肯定会奏效。您是否绝对确定您的

data（）

方法返回了一个带有

token

属性的对象，并且您没有在另一个组件的模板中使用

token

？

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

export class util {
    static tokenGenerator() {
       //do your stuff here
    }
}

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

<script>
import { util } from '../../functions';

export default {
  data() {
    return {
       textData: util.tokenGenerator
    }
  } 
}
</script>