Alpine.js技术问询：如何从$store获取数组及在getSales中读取products数组

1. 从 $store 中获取 products 数组 #

分两种使用场景处理：

场景1：在 Alpine 组件模板/内部方法中使用 #

在 Alpine 组件的模板里，可直接通过 $store 魔法属性访问数组：

<div x-data>
  <!-- 显示产品总数 -->
  <p>产品总数：<span x-text="$store.getProducts.products.length"></span></p>
  
  <!-- 循环渲染产品列表 -->
  <ul>
    <template x-for="product in $store.getProducts.products" :key="product.id">
      <li x-text="product.name"></li>
    </template>
  </ul>
</div>

如果是在组件内部方法中，用 this.$store 访问：

x-data="{
  logProducts() {
    console.log(this.$store.getProducts.products);
  }
}"

场景2：在 Alpine 组件外部的普通 JS 代码中使用 #

直接调用 Alpine.store() 方法获取商店实例，进而拿到数组：

const products = Alpine.store('getProducts').products;

2. 在 getSales 函数中读取 products 数组 #

原代码直接用 $store 会报错——$store 是 Alpine 组件内部的魔法属性，普通 JS 函数无法直接访问。需要改用 Alpine.store() 方法，同时要注意异步加载的问题（因为 getAllProducts 是异步请求数据）：

修正后的 getSales 函数 #

const getSales = () => {
  // 获取商店实例
  const productStore = Alpine.store('getProducts');
  
  // 示例：对products做业务处理，比如筛选促销商品
  const saleProducts = productStore.products.filter(product => product.isOnSale);
  
  return {
    allProducts: productStore.products,
    saleProducts: saleProducts
  };
};

处理异步数据的注意事项 #

因为 getAllProducts 是异步请求，若在数据加载完成前调用 getSales，拿到的会是空数组。可以通过以下方式确保数据加载完成：

1. 先调用 getAllProducts 并等待其完成，再调用 getSales：

Alpine.store('getProducts').getAllProducts().then(() => {
  const salesData = getSales();
  console.log(salesData);
});

2. 给 getAllProducts 方法添加返回值，使其返回 Promise，方便外部等待：

Alpine.store("getProducts", {
  url: "http://localhost:3000/products",
  products: [],
  getAllProducts() {
    return fetch(this.url)
      .then((response) => response.json())
      .then((data) => {
        this.products = data;
      });
  },
});

完整修正代码 #

document.addEventListener("alpine:init", () => {
  Alpine.store("getProducts", {
    url: "http://localhost:3000/products",
    products: [],
    getAllProducts() {
      return fetch(this.url)
        .then((response) => response.json())
        .then((data) => (this.products = data));
    },
  });
});

const getSales = () => {
  const productStore = Alpine.store('getProducts');
  // 示例：筛选价格低于50的商品作为促销品
  const saleProducts = productStore.products.filter(p => p.price < 50);
  
  return {
    allProducts: productStore.products,
    saleProducts: saleProducts
  };
};

// 使用示例：先加载数据再获取促销信息
Alpine.store('getProducts').getAllProducts().then(() => {
  const salesInfo = getSales();
  console.log('所有商品:', salesInfo.allProducts);
  console.log('促销商品:', salesInfo.saleProducts);
});

内容的提问来源于stack exchange，提问作者Regis Santos