如何从自定义JS函数中调用AlpineJS bundle内定义的modal store的close方法

你对Alpine.store的API使用方法有误，才会出现调用失败的问题，正确调用方式如下：

// 直接获取modal store实例，调用内置的close方法即可
Alpine.store('modal').close()

原写法错误原因 #

• 当你给Alpine.store传入两个参数时，Alpine会判定你要注册/覆写整个store：
  • 你写的Alpine.store('modal', { open: false })看起来能生效，实际是直接把你原来定义的带close方法、id属性的store直接覆盖成了只有open属性的新对象，只是刚好符合你修改open的预期而已，属于错误用法。
  • 你写的Alpine.store('modal', { close() })本身语法不合法，同时也是错误的覆写操作，自然无法运行。
• 当你只给Alpine.store传入1个store名参数时，Alpine会返回对应store的实例，你可以直接操作实例的属性、调用实例的方法：

  // 正确修改单个属性的写法
  Alpine.store('modal').open = false
  // 正确调用方法的写法
  Alpine.store('modal').close()
  

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