在 Alpine.data 对象中连接数组会返回代理

Question

我正在使用

Alpine.data

全局变量，并且希望在

loadJobs

方法触发时连接数组。我对 JS 中的代理不熟悉，我不太明白为什么我的

data

属性返回一个 Proxy 对象而不是一个简单的数组。

这是我正在使用的代码：

jobState = {
    low: 5,
    high: 10,
    isLoaded: false
}

document.addEventListener("alpine:init", () => {
    Alpine.data("loadMoreJobs", () => ({
        data: [],
        loadJobs() {
            // Update jobState
            jobState.low = jobState.high
            jobState.high += 5
            const requestParams = {
                dataType: 'json',
                method: 'GET'
            }
            fetch(`http://127.0.0.1:3000/jobs/list/${jobState.low}/${jobState.high}`, requestParams)
                .then((data) => {
                    return data.json()
                })
                .then((data) => {
                    this.data = [...this.data, data]
                })
        }
    }))
})

Answer 1

data

注销为

Proxy

，因为这就是 Alpine.js 反应性的工作原理：它将所有相关对象包装在 Proxy 中，以便将更改挂接到所述对象中。

代理应该与底层数据结构一样工作，唯一的区别是 Alpine 可以挂钩代理上的操作（重新分配、突变等）。

正如评论中提到的。解开代理并获取原始数据结构副本的一种方法是使用

JSON.parse(JSON.stringify(data))

（或另一种深度克隆方法，例如

structuredClone

，但尚未广泛使用）。

Answer 2

访问原始数组而不是代理的另一种方法是使用 Alpine.raw();

例如，要取回一个数组并对其执行某些操作，您可以使用：

让 arry = Alpine.raw(this.myArray);

您还可以在控制台日志中使用它： x-init="console.log(Alpine.raw(user))";

它的工作方式与 JSON.parse(JSON.stringify(this.myArray)) 非常相似，但它对我来说更容易记住。

我在 github 论坛中找到了这个，但我还在 Alpine 3.x Tips and Tricks 中找到了一个很好的例子：

https://ryangjchandler.co.uk/posts/alpine-3-tips-and-tricks