Доступ к свойствам компонента Svelte в обратном вызове?

Question

Представьте, что у вас много свойств в компоненте:

let a = 'foo';
let b = 'bar';
// ...
let z = 'baz';

Затем вы захотите сделать что-то вроде обновления всех из внешнего обратного вызова, как в другой библиотеке (то есть что-то, что не является и не может быть компонентом Svelte).

Простой вариант использования - это просто метод AJAX для загрузки группы данных (предположим, что эта функция ajax работает, и вы можете передать ей обратный вызов):

onMount(async function() {
  ajax('/data', function(data) {
    a = data.a;
    b = data.b;
    // ...
    z = data.z;
  });
});

Это работает, но это невероятно. Что мне действительно нравится, так это способ обойти все свойства, чтобы они могли быть назначены программно, особенно без предварительного знания внешней библиотеки / функции обратного вызова.

Нет ли способа получить доступ к компоненту Svelte и его свойствам, чтобы вы могли проходить через них и назначать их из внешней функции?

У Vue есть простое решение, потому что вы можете передать компонент, и все же проверить и присвоить его свойствам:

var vm = this;
ajax('/data', function(data) {
  for (var key in data) {
    if (vm.hasOwnProperty(key)) {
      vm[key] = data[key];
    }
  });
});

Я видел некоторые решения для этого, но все они устарели - ни один из них не работает с Svelte 3.

Извиняюсь, если об этом уже спрашивали. Я потратил несколько дней, пытаясь понять это, чтобы избежать всего этого лишнего шаблона, и самое близкое, что я мог найти, - это Access Component Object во внешнем обратном вызове? который не имеет ответа прямо сейчас.

Answer 1

Если возможно, вы можете поместить вызов ajax в родительский компонент и сохранить данные, возвращенные из него, во временном объекте, который затем передается компоненту с помощью оператора распространения.

<Component { ...dataObject }></Component>

let dataObject = {};
onMount(async function() {
  ajax('/data', function(data) {
    dataObject = data;
  });
});

Answer 2

Вы можете уменьшить шаблон, используя деструктуризацию:

onMount(async function() {
  ajax('/data', data => {
    ({ a, b, ..., z } = data);
  });
});

Но если у вас очень большое количество переменных, вам лучше было бы просто поместить их в объект:

let stuff;

onMount(async function() {
  ajax('/data', data => {
    stuff = data;
  });
});