Alpine JS如何通过外部事件修改x-data与$store响应式数据

你的代码不生效是两个基础逻辑问题导致的：

• Alpine初始化x-data时，不会直接使用你挂载在window上的原始对象，而是会基于传入值生成独立的响应式代理对象，页面渲染全程用的是这个代理。你修改原始window.x的属性，根本不会同步到Alpine实际使用的响应式数据上，自然不会触发视图更新。
• 你定义的setFoo用了箭头函数，箭头函数的this由声明时的外层词法作用域决定，这里会直接指向全局window，根本不指向x对象本身，哪怕没有Alpine的响应式代理逻辑，这个方法也无法正确修改foo属性。

方法1：直接获取组件响应式实例修改 #

给绑定x-data的DOM元素加标识，通过Alpine内置的$data方法拿到真实的响应式数据对象，修改即可触发更新：

<!-- 给根元素加id方便选取 -->
<main id="app" x-data='x'>
   <p x-text='foo'>
</main>

window.x = {
  foo: 'bar'
}

// 必须等Alpine初始化完成后再操作
document.addEventListener('alpine:initialized', () => {
  const reactiveData = Alpine.$data(document.getElementById('app'))
  // 直接修改响应式对象属性，页面自动更新
  reactiveData.foo = 'boo'
})

如果你用的是$store全局状态，直接修改Alpine.store('store名称').属性名即可，不要修改你自己提前声明的原始store对象。

方法2：自定义事件通信 #

不想耦合DOM选取逻辑的话，可以在组件内部监听全局自定义事件，外部需要更新值时触发事件传参即可：

<main x-data='{
  foo: "bar",
  init() {
    window.addEventListener("set-foo", (e) => {
      this.foo = e.detail
    })
  }
}'>
   <p x-text='foo'>
</main>

外部（包括第三方库回调里）直接触发事件传值就行：

window.dispatchEvent(new CustomEvent('set-foo', { detail: 'boo' }))

方法3：初始化时暴露全局修改方法 #

如果习惯直接调用全局方法修改，可以在组件的init生命周期里把修改方法挂载到window，这时候方法内的this指向Alpine的响应式实例，修改会同步到视图：

Alpine.data('x', () => ({
  foo: 'bar',
  init() {
    window.updateFoo = (newVal) => {
      this.foo = newVal
    }
  }
}))

外部直接调用window.updateFoo('boo')就能完成更新。

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