Alpine js 获取错误找不到商店和商店内的对象

Question

我试图在商店的 Alpine 组件内创建一个 for 循环，但我收到错误“Uncaught TypeError: Cannot read properties of undefined (reading 'items')”。即使我在模板标记内执行 for 循环并正确传递我认为的值。可能是什么问题？或者我需要在 html 文件中导入商店吗？

// index.html
<div class="content__mid" x-data="">
  <template x-for="item in $store.products.items" :key="item.id">
    <p class="content__mid-item" x-text="item.title"></p>
  </template>
</div>

//script.js

import Alpine from 'alpinejs'
 
Alpine.store('products', {
  items: [
    {
      id: 1,
      title: 'Aspirin',
      country: 'USA',
      manufacturer: 'Bangladesh',
      price: '120',
      validDate: '02.10.2024'
    },
    {
      id: 2,
      title: 'Aspirin',
      country: 'Italy',
      manufacturer: 'Bangladesh',
      price: '120',
      validDate: '02.10.2024'
    }
  ]
})
 
Alpine.start()