Wire Apex Methods — Property & Dynamic Parameters

好，我们接着来看，如何把Apex方法和咱们组件里的属性连接起来，这是LWC里最常用的数据获取模式，非常简单，却也很容易踩坑。我一点点给你讲清楚。 首先，最简单的模式是这样的：你先从Salesforce里导入那个Apex方法，然后用`@wire`这个装饰器，直接装饰一个组件属性。比如，我写一个`accounts`属性，用`@wire(getAccountList)`去装饰它。这样一来，数据就会自动流到这个`accounts`里面。但注意，你要拿到的数据并不是直接放在属性上，而是分成了两块：一块是`accounts.data`，存着真正的数据；另一块是`accounts.error`，如果出错了，错误信息就在这儿。所以你去模板里渲染的时候，就得写`accounts.data`，并且常常要先判断一下有没有值、有没有错。 那如果Apex方法需要参数，该怎么办呢？比如我们想做一个搜索框，要根据用户输入的关键字去查数据。这就引出了“响应式”的概念。你可以在参数的位置，写一个以美元符号开头的字符串，比如`$searchKey`，它就告诉框架：嘿，我这个参数，绑定的是组件上一个叫`searchKey`的响应式属性，一旦这个属性变了，你要自动重新帮我调Apex方法，拿新数据回来。这样，你压根不用手动去调用方法，只要更新`this.searchKey`，连线就会自己动起来，非常省心。 但是，这里有一条关键语法规则，很多初学者都会在这儿栽跟头。你看到这个`$searchKey`前面的美元符号，可别以为参数就是简单传一个变量名过去。你传递给Apex方法的参数，必须是一个对象！哪怕你的Apex方法只接受一个参数，你也得把它包装成对象。比方说，Apex的方法声明是`getAccounts(String searchKey)`，那在LWC里，你不能写`@wire(getAccounts, '$searchKey')`，也不能直接把`this.searchKey`传进去。你必须写成`@wire(getAccounts, { searchKey: '$searchKey' })`。你看，外面是一个花括号，里面是这个参数的名字，冒号后面才是带美元的引用。不包这个花括号，或者直接传字符串、数组，都是不行的。这点请一定记住。 接下来，我们聊一个很实用的优化模式——去抖动，尤其是用在搜索输入框上。你想象一下，如果用户每敲一个字母，组件都立刻去服务器请求一次数据，那服务器压力得多大，网络也很浪费。正确的做法是，等用户停手不敲了，稳定一小会儿，再发请求。这个稳定的一小会儿，我们通常设成300毫秒。 怎么实现呢？我们一般在组件的属性里，用一个`setTimeout`和`clearTimeout`配合起来。比如，你有一个私有的真实存放关键词的属性`_searchKey`，然后对外使用get和set。在setter里面，你先清除上一次还没执行的定时器，然后再开一个新的定时器，延迟300毫秒，把用户刚输入的最新值赋给`_searchKey`。因为`_searchKey`被绑在`@wire`的`$searchKey`上，300毫秒后一更新，连线自然就去请求数据了。这样，无论用户打字多快，咱们只会在最后停顿之后，才发送一次请求。 这个延迟的时间通常定义成一个常量，比如`DELAY = 300`，方便统一管理。这个模式在几乎所有带搜索功能的地方，都是必选项，你用好了，组件的体验就会既流畅又轻量。 总结一下，今天咱们学了连接Apex方法和属性的核心模式：用`@wire`装饰属性，取数据用`.data`和`.error`；要传参数就用`$`前缀让它变成响应式，并且一定得包装成对象；最后，如果是搜索场景，别忘了加300毫秒的去抖动，用`setTimeout`和`clearTimeout`来延迟请求。这几点你把握住了，就能很平滑地从Apex拿数据了。