在回调中访问 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;
  });
});

这行得通，但它是令人难以置信的样板。我真正想要的是一种遍历所有属性的方法，以便可以以编程方式将它们分配给它们，尤其是在外部 library/callback 部分没有先验知识的情况下。

是否无法访问 Svelte 组件及其属性，以便循环遍历它们并从外部函数分配它们？

Vue 对此有一个简单的解决方案，因为您可以传递组件，并仍然检查并分配给它的属性：

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

我已经看到了一些解决方案，但它们都已经过时了 - none 其中可以与 Svelte 3 一起使用。

如果之前有人问过这个问题，我们深表歉意。我花了几天时间试图解决这个问题，以避免所有额外的样板文件，我能找到的最接近的是 Access Component Object in External Callback?，现在没有答案。

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

在回调中访问 Svelte 组件属性？

Accessing Svelte component properties in a callback?

javascript

svelte

svelte-3