1

Вот предельно упрощенный код:

<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);

2 ответа 2

0

Вариант 1. Если вам не нужна реактивность - просто объявите обычную переменную const dict_posts: { id: number; value: string }[] = []

Вариант 2. Если вам надо положить это в store то сделайте Object.freeze(resp.data) и данные так же не будут реактивными.

Вариант 3. Вариант с Object.freeze и ref const dict_posts = ref<readonly { id: number; value: string }[]>(Object.freeze([{ id: 1, value: '' }]));

6
  • Реактивность нужна однократная - ровно до того момента, как поступление данных отобразится в шаблоне. Заморозить идея наверно здравая, но как поймать момент, когда это можно сделать? В хуке onUpdate не проходит, т.к. таких переменных может быть несколько. Сочетания watch, onUpdate, специальных структур, указывающих какая переменная уже заполнилась и определенной логики, как то уж слишком громоздко...
    – progervova
    10 авг 2021 в 4:04
  • Положите всё в store, работайте с axios в action, складывайте в state замороженное - это самый простой и правильный способ получить удовольствие и иметь хорошую структуру. 10 авг 2021 в 11:13
  • Так бытует мнение, что Composition API может заменить Vuex?
    – progervova
    11 авг 2021 в 3:40
  • Не знаю кто там что бытует :). Я с кайфом юзаю Vuex в третьей вьюшке. Композишн апи распробовал и постоянно использую. Не знаю вообщем, я бы сложил всё в store. 11 авг 2021 в 15:30
  • Добавил 3 вариант с Object.freeze и ref. Не пробовал, но должно сработать. 11 авг 2021 в 15:35
0

Проблема решается с помощью асинхронной функции setup

  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>

и использовать везде уже его, а это как-то не элегантно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.