Alpine.js $store变量变更时组件无响应问题排查

核心问题 #

你直接给$store对象新增了scrolled属性，但Alpine.js的全局store需要通过Alpine.store()方法显式定义才能被纳入响应式跟踪体系。直接赋值的属性无法触发组件的重新渲染，所以即使控制台里变量值已更新，组件也不会同步响应。

修复步骤 #

1. 正确初始化全局响应式store：在页面加载时用Alpine.store()定义包含响应式属性的store，替代原来在x-init里直接给$store加属性的方式。
2. 统一引用路径：把所有$store.scrolled的引用替换为$store.scroll.scrolled（scroll是我们定义的store名称）。
3. 更新交叉监听回调：修改x-intersect的触发逻辑，操作store内的响应式属性。

修复后的完整代码 #

<script src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.10.5/cdn.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
  // 初始化全局响应式store
  document.addEventListener('alpine:init', () => {
    Alpine.store('scroll', {
      scrolled: false
    })
  })
</script>
<div class="pt-10 pl-[100px]">
  <data id="global_helper" 
        class="absolute top-0 left-0 h-[300px] w-[100px] bg-yellow-500 z-[-1]" 
        x-data 
        x-intersect:enter="$store.scroll.scrolled=false" 
        x-intersect:leave="$store.scroll.scrolled=true">300px</data>
  <header x-data 
          class="fixed block w-full h-10 top-0" 
          :class="$store.scroll.scrolled ? 'bg-red-500' : 'bg-blue-500'">
    This is the Header, the site is <span x-text="$store.scroll.scrolled ? 'in scrolldown mode' : 'on the top'"></span>
  </header>
  <main x-data 
        class="p-4" 
        :class="$store.scroll.scrolled ? 'bg-gray-100' : 'bg-green-100'">
    <h1 class="text-2xl pb-10 font-bold">The scroll position should effect both, the header and the main content.</h1>

    <p class="pb-10">
      After scrolling down 300px both header and main should change their background color.<br>
      The header and the main content are intentionally NOT in the same <tt>x-data</tt> component.<br>
      (The parent of those would be the body or a similar large node)
    </p>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
    Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
    Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
    </p>
  </main>
</div>

原理说明 #

Alpine.js的响应式系统基于ES6 Proxy实现，只有通过Alpine.store()注册的store对象，Alpine才会为其创建代理，从而能够检测到属性的变化并触发组件重新渲染。直接给$store添加的属性不在代理跟踪范围内，所以组件无法感知到变化。

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