初始化 AlpineJS 后更新存储不起作用答案

【问题标题】：Updating store after initialization for AlpineJS doesn't work初始化 AlpineJS 后更新存储不起作用
【发布时间】：2021-09-11 01:38:34
【问题描述】：

要初始化我拥有的商店

document.addEventListener('alpine:init', () => {
  Alpine.store('selectedInput', 0)
})

但是当我在更下方的函数中执行此操作时，它不会更新 selectedInput：

function example() {
  Alpine.store('selectedInput', 3)
}

【问题讨论】：

【解决方案1】：

使用来自文档网站的示例 - https://alpinejs.dev/globals/alpine-store

Alpine.store('darkMode', {
    on: false,

    toggle() {
        this.on = ! this.on
    }
})

darkMode 是您商店的名称。 on 是一个属性 toggle 是一个函数

所以在你的情况下，它应该看起来像这样 -

Alpine.store('nameOfStore', {
    selectedInput: 0,

    example() {
        this.selectedInput = 3
    }
})

您可以将nameOfStore 替换为您喜欢的任何内容。

要调用该函数，您将执行以下操作 - $store.nameOfStore.example()

【讨论】：

是的，在文档中。在该页面的底部还有Alpine.store('darkMode', false)，因此您可以直接设置一个值。根据我的帖子，这实际上适用于初始化，只是当我想使用该行将变量设置为不同的值时，不会在文件中进一步向下。
@eskimo 好的...在 example() 中执行此操作this.$store.selectedInput = 3