将结果从 <script> 导入 <script setup>

Question

我正在尝试枚举 Vue 组件的实例以确保唯一的 ID，为此使用一个简单的生成器。通常我会在 setup 函数之外启动生成器：

const idGen = generateIds("component:my-component");

export default {
  setup() {
    const id = idGen.next().value;

    return {
      id,  // e.g. "component:my-component/0042"
    };
  },
};

但是对于 <script setup> 糖，我不太确定这是怎么做到的。我知道我可以运行在另一个只会执行一次的 <script> 块中产生副作用：

<script>
const idGen = generateIds("component:my-component");
</script>

但是我不知道我要访问 <script setup> 中的共享 idGen 来增加枚举数并获得唯一 ID。

<script setup>
// Where do I get idGen from the above <script>?
const id = idGen.next().value;
</script>

在使用 <script setup> 糖时，我能想到的唯一方法是在单独的文件中启动生成器：

<script setup>
import { idGen } from "./id-generator.js";

const id = idGen.next().value;
</script>

唯一的问题是，为这个非常属于组件的微小逻辑创建一个单独的文件有点烦人，所以我会尽可能避免它。

Answer 1

编辑：事实证明顺序根本不相关

任何<script>都会运行正常

<script setup> 中的代码是 converted/compiled 到 组合 API “设置”函数，当它被调用时，所有top-level 其他 <script> 中的代码已经执行，因此 idGen 已经可用

所以

忽略此答案的其余部分

~~大多数使用另一个 <script> 的 vue3 <script setup> 示例总是显示顺序~~

<script setup></script> <script></script>

在你的情况下，这是行不通的。

但是，如果脚本按此顺序排列

<script> const idGen = generateIds("component:my-component"); </script>

然后

<script setup> const id = idGen.next().value; </script>

然后 idGen 将在 <script setup>
内可用

~~注意：您的 SFC 中可以有任意数量的 <script> 标签，顺序不限，但只能有一个 <script setup>~~

将结果从 <script> 导入 <script setup>

Importing result from <script> into <script setup>

javascript

vue.js

vuejs3