主页 / 问题 / 1315631
Accepted
progervova
Asked:2022-08-09 13:57:18 +0000 UTC2022-08-09 13:57:18 +0000 UTC

如何将异步接收的数据传递给 Vue 组件模板而不使其反应

  • 772

这是极其简化的代码：

<template>
  dict_posts.length={{ dict_posts.length }}
</template>

<script lang="ts">
import axios from "axios";

export default {
  setup() {
    let dict_posts: { id: number; value: string }[] = [];
    axios.get('http://localhost:8000/api/dict_posts').then(resp => dict_posts = resp.data);
    return {dict_posts}
  }
}
</script>

我需要一个要在模板中使用的职位字典。词汇量大且不可更改。据我了解，如果您将变量设为响应式，则将为此花费某些资源，而我不需要响应式，因为 他是永久的。但它是从基础异步填充的。如何仅在填充变量后将变量传递给模板？在响应式版本中，一切都很清楚。

const dict_posts = ref<{ id: number; value: string }[]>([]);
axios.get('http://localhost:8000/api/dict_posts').then(resp => dict_posts.value = resp.data);
javascript

2 个回答

  1. 选项 1. 如果您不需要反应性 - 只需声明一个常规变量const dict_posts: { id: number; value: string }[] = []

    选项 2。如果您需要将其放在商店中，那么就这样做，Object.freeze(resp.data)数据也不会是被动的。

    选项 3. 带有 Object.freeze 和 ref 的选项const dict_posts = ref<readonly { id: number; value: string }[]>(Object.freeze([{ id: 1, value: '' }]));

    • 0
  2. Best Answer

    使用异步设置功能解决了问题

      async setup() {
    const dict_posts: { id: number; value: string }[] =
        (await axios.get('http://localhost:8000/api/dict_posts')).data;
    return {dict_posts}
  }

    但是在使用组件的时候，需要用suspense标签框起来，否则会报错：

    runtime-dom.esm-bundler.js?830f:30 Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null

    鉴于该组件应该在程序中的许多地方使用，这会稍微加载代码。我想知道有没有办法解决它？到目前为止，我只是想用模板再声明一个组件

      <suspense>
    <template #default>
      <мой_основной_компонент/>
    </template>
    <template #fallback>загрузка...</template>
  </suspense>

    并且已经在任何地方使用它，但这在某种程度上并不优雅。

    • 0

相关问题