如何更改 Alpine.js 中的共享状态？

Question

我试图通过在调整 window 大小时更改共享状态来隐藏 DOM 中的多个元素。

<body class="font-body relative" x-data="{hideOnMobile:false}">
 <section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
   ...
  </section>
</body>

当我尝试

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

它应该将状态 ** hideOnMobile** 更改为 true 但它不知道怎么回事？

Answer 1

您在 x-data 属性之前没有 space。尝试更改此行：

<body class="font-body relative"x-data="{hideOnMobile:false}">

对此：

<body class="font-body relative" x-data="{hideOnMobile:false}">

Answer 2

您尝试过使用 @resize.window 吗？（即使用 Alpine.js 添加 resize 侦听器）它应该使您的代码比使用 window.onresize + 尝试更新 Alpine.js __x.$data internal.

<body
  class="font-body relative"
  x-data="{hideOnMobile:false}"
  @resize.window="hideOnMobile = window.innerWidth > 639"
>
 <section class="mt-5" :class={'section' : !hideOnMobile , 'hidden' : hideOnMobile}">
   ...
  </section>
</body>

Answer 3

看起来这被用作 AlpineJS 自述文件中的示例。看看这个：

.window modifier Example:

<div x-on:resize.window="isOpen = window.outerWidth > 768 ? false : open"></div>

Adding .window to an event listener will install the listener on the global window object instead of the DOM node on which it is declared. This is useful for when you want to modify component state when something changes with the window, like the resize event. In this example, when the window grows larger than 768 pixels wide, we will close the modal/dropdown, otherwise maintain the same state.

如何更改 Alpine.js 中的共享状态？

How to change shared state in Alpine.js?

javascript

shared-state

alpine.js