如何通过fetch异步请求的返回值正确加载Alpine Store？

你当前的写法无法拿到预期数组，核心是fetch的链式调用返回值始终是Promise对象，直接赋值给store属性后，my_data存储的是Promise实例而非接口返回的实际数据，Alpine本身不会自动解析Promise完成赋值。

直接利用Alpine Store自带的init生命周期钩子即可，不需要额外引入第三方库，也不需要改造原有请求逻辑：

1. 先给my_data设置匹配类型的初始值（比如空数组），避免初始渲染时模板访问属性报错
2. 在init钩子里发起异步请求，拿到返回结果后直接给my_data赋值即可，Alpine的响应式系统会自动同步更新所有用到该数据的视图

写法1：Promise链式调用 #

document.addEventListener('alpine:init', () => {
    Alpine.store('myStore', {
        my_data: [], // 初始空数组，匹配接口返回的数组类型
        init() {
            fetch('/api/1')
                .then(response => response.json())
                .then(data => {
                    this.my_data = data
                })
                .catch(err => {
                    console.error('数据加载失败:', err)
                })
        }
    })
})

写法2：async/await 语法（更简洁） #

如果习惯用同步写法写异步逻辑，直接给init加async修饰符即可：

document.addEventListener('alpine:init', () => {
    Alpine.store('myStore', {
        my_data: [],
        async init() {
            try {
                const response = await fetch('/api/1')
                this.my_data = await response.json()
            } catch (err) {
                console.error('数据加载失败:', err)
            }
        }
    })
})

• 不要省略初始值设置：如果模板中存在对my_data的遍历、属性读取操作，未设置初始值时初始渲染会触发undefined相关报错，数据返回后视图虽然会更新，但首屏容易出现异常。
• 不需要额外封装响应式赋值逻辑：Alpine Store的属性本身是响应式的，只要在异步回调中正确拿到store实例的this引用，直接赋值就能触发视图更新。
• 如果后续需要加加载态，也可以直接在store里加loading: false属性，请求发起时设为true，请求结束后设为false，模板里直接读取该状态做加载提示即可。

内容的提问来源于stack exchange，提问作者user1961