Alpine.store中两个相同函数执行结果不同的问题求助

1. Alpine.store 定义存在语法错误 #

你的 store 定义末尾缺少闭合括号，这会导致 JavaScript 解析异常，部分方法可能无法正确挂载到 store 实例上，这是 functionA 中变量返回 undefined的核心原因。修正后的代码如下：

Alpine.store('collection', {
  var1: false,
  var2: 1,
  functionA() {
    alert(this.var1)
    alert(this.var2)
  },
  functionB() {
    alert(this.var1)
    alert(this.var2)
  }
}) // 补上闭合括号

2. 按钮点击事件的函数调用方式错误 #

你在 @click 中直接传入函数引用，会导致函数执行时 this 上下文丢失（此时 this 指向触发事件的按钮元素，而非 store 实例）。正确写法是调用函数时添加括号：

<body x-data>
  <button @click="$store.collection.functionA()">Button</button>
  <button @click="$store.collection.functionB()">Button</button>
</body>

修复以上两个问题后，两个函数都能正确访问 store 内的变量。

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