如何使用 Pinia 在 Nuxt3 中从服务器 api 存储初始状态

Question

我想在网站加载时首先将数据存储在 Pinia 中，这样我可以在浏览页面时从 Pinia 获取数据，而无需继续调用 api。

但是当我想使用像过滤器这样的数组方法的数据时， 我收到错误消息“500 无法读取 null 的属性（读取“过滤器”）”。

问题能解决吗？ 如果有更好的方法来实现该功能，请告诉我。

这是我的代码：

页面/餐厅/[slug].vue

<template>
  <div>
    <ul class="c-cardList">
      <li class="c-card" v-for="item in filteredRestaurants" :key="item.id">
        <div class="c-card_name">{{ item.data[0].data }}</div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  const { data: restaurants } = useRestaurants();

  const category = "cafe";

  const filteredRestaurants = ref(
    restaurants.value.filter(element => {
      return element.data[1].data[0] == category;
    })
  );
</script>

可组合项/useRestaurants.ts

import { storeToRefs } from "pinia";
import { useRestaurantsStore } from '@/store/restaurants';


export default function () {

  const restaurantsStore = useRestaurantsStore();
  restaurantsStore.callData();
  const { data } = storeToRefs(restaurantsStore);
  
  return {
    data
  }

}

商店/餐厅.ts

export const useRestaurantsStore = defineStore(
  "restaurants",
  {
    state: () => ({
      data: null,
    }),
    actions: {
      async callData() {
        const { data } = await useFetch('/api/restaurants');
        this.data = data.value.items;
      },
    },
  }
 );

Answer 1

问题是初始化存储时您没有等待异步

callData

的结果，因此程序继续初始化

filteredRestaurants

并失败，因为

restaurants

尚未填充。

例如，您可以将

filteredRestaurants

从

ref

更改为

computed

，这样它将跟踪更改并在获取数据时重新计算，并添加可选链接以避免初始失败：

const filteredRestaurants = computed(() => restaurants.value?.filter(element => element.data[1].data[0] === category));

Answer 2

我通过在前面添加await成功获取数据了

useRestaurants()

！

const { data: restaurants } = await useRestaurants();