如何刷新 Alpine.js 中的状态？

Question

大家好，当 window 调整到断点上方时，我正试图隐藏我的移动菜单。我已经实现了 Alpine.js，它似乎工作正常，但是当我尝试访问它的 x 数据以将应该隐藏的布尔值设置为 false 时，它什么也没做。

<body x-data="{ open: false, navbar: false, resDrop: false }">
  <div class="md:hidden" :class="{'block': navbar, 'hidden': !navbar}">
    <div><span></span></div>
    ...
  </div>
</body>

当我尝试

window.onresize = function (event) {
    let data = document.querySelector('[x-data]');
      
    if (window.innerWidth > 768) {
        return data.__x.getUnobservedData().navbar = false;
    }
};

到return 导航栏到它的初始关闭状态它只是不起作用。我有什么办法可以做到这一点？

Answer 1

切换到这个，现在它运行良好。

window.onresize = function (event) {
    let data = document.querySelector('[x-data]');
      
    if (window.innerWidth > 768) {
        return data.__x.$data.navbar = false;
    }
};

Answer 2

您可以按照以下方式使用 x-on:resize.window：

<nav 
  x-data="{ navbar: false }" 
  x-on:resize.window="navbar = (window.outerWidth >= 768) ? true : false"
>
  <div class="md:hidden" :class="{'block': navbar, 'hidden': !navbar}">
    Nav Content
  </div>
</nav>

此外，从性能的角度来看，最好将状态放在组件上，而不是 <body>，因此 alpine 需要遍历的节点较少。这也更好地保持组件的作用域，避免它们在同一对象中共享不相关的状态，并简单地使您的组件可移植。

如何刷新 Alpine.js 中的状态？

How to refresh state in Alpine.js?

javascript

alpine