TypeError：无法重新定义属性：使用 Livewire 3 和 AlpineJs 3 的 Laravel 11 中的 $persist

Question

我正在使用 Laravel 11、Livewire 3 和 AlpineJs 3 开发一个项目。我正在尝试使用 @alpinejs/persist 插件来管理暗模式切换。但是，我不断遇到以下错误：

livewire.esm.js:4999 
 Uncaught 
TypeError: Cannot redefine property: $persist
    at Function.defineProperty (<anonymous>)
    at src_default (livewire.esm.js:4999:14)
    at livewire.esm.js:2766:32
    at Array.forEach (<anonymous>)
    at Object.plugin (livewire.esm.js:2766:17)
    at Object.start (livewire.esm.js:9448:28)
    at app.js:20:10

这是我的设置：

app.js：

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import persist from '@alpinejs/persist';

window.Alpine = Alpine;

console.log('Alpine.$persist adding it');
Alpine.plugin(persist);

/* Stores */
Alpine.store('darkMode', {
  on: Alpine.$persist(true).as('darkMode_on'),
  toggle() {
    this.on = !this.on;
  },
});

Livewire.start();

layouts/app.blade.php：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data :class="$store.darkMode.on && 'dark'">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ asset('/css/bootstrap-icons.min.css') }}">
    @livewireStyles
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="">
<main class="container mx-auto my-3">
    {{ $slot }}
</main>
@livewireScriptConfig
</body>
</html>

我希望

@alpinejs/persist

插件能够正常工作，从而允许我使用 Alpine.js 商店切换暗模式。但是，错误

TypeError: Cannot redefine property: $persist

表明

persist

插件被加载或定义多次。

以下是我排除故障所采取的步骤：

已验证
```
@alpinejs/persist
```
仅在
```
app.js
```
中导入并注册一次。
清除浏览器缓存并在隐身模式下尝试。
确保Alpine.js和
```
@alpinejs/persist
```
的版本兼容。

尽管执行了这些步骤，错误仍然存在。我不确定为什么会发生这种情况或如何解决。

Answer 1

Livewire 3 已经包含一些常见的 AlpineJs 插件，persist 就是其中之一。

因此您可以删除所有导入，并且不需要手动启动Livewire，您可以只在store中保留darkMode

初始化


Alpine.store('darkMode', {
  on: Alpine.$persist(true).as('darkMode_on'),
  toggle() {
    this.on = !this.on;
  },
});

这里有关于已包含插件的信息

TypeError：无法重新定义属性：使用 Livewire 3 和 AlpineJs 3 的 Laravel 11 中的 $persist

问题描述投票：0回答：1

1个回答

最新问题

TypeError：无法重新定义属性：使用 Livewire 3 和 AlpineJs 3 的 Laravel 11 中的 $persist

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1