Pinia：在商店中存储多个类别

Question

我正在使用 Nuxt Typescript 和 Pinia 2.0.35 构建电子商务，我制作了一个包含分页的页面存储，它工作正常，但我想为多个类别创建一个存储，并更新 api 端点。 （允许类别数组）

这是路线，“类别”“全部”返回所有产品，所以我想使用“全部”作为默认类别（它有更多过滤器但主页只允许这两个参数）：

http://localhost:4000/api/product/find/page/:pageNum?/:category?/

我像这样更新商店：

  <div class="h-14 text-center">
            <h1>Página {{ page.count }}</h1>
            <button @click="decrement">Anterior</button>
            <button @click="update">Próximo</button>
        </div>

<script setup lang="ts">
import { useCounterStore } from '~/store/pages'
import { useCategoryStore } from '~/store/categories';
const page = useCounterStore()
const category = useCategoryStore()
console.log(category)

function incrementCount() {
    page.increment()
}

function decrementCount() {
    page.decrement()
}

defineExpose({
    page,
    incrementCount,
    decrementCount
})

</script>

并像这样更新网址：

<script lang="ts">
export default {
    name: 'Products',
    props: {
        numStars: Number,
        numReviews: Number,
    },
    data(): { products: Product[] } {
        return { products: [] };
    },
    async mounted() {
        this.get()
    },
    methods: {
        async get() {
            const category = 'all'
            const pageNum = this.page.count
            const response = await fetch(`http://localhost:4000/api/product/find/page/${pageNum}/${category}`);
            const data = await response.json();
            this.products = data.response;
            console.log(data)
        },
        async update() {
            this.incrementCount()
            const pageNum = this.page.count
            const response = await fetch(`http://localhost:4000/api/product/find/page/${pageNum}/all`);
            const data = await response.json();
            this.products = data.response;
        },
        async decrement() {
            this.decrementCount()
            const pageNum = this.page.count
            const response = await fetch(`http://localhost:4000/api/product/find/page/${pageNum}/all`);
            const data = await response.json();
            this.products = data.response;
        }


    }

}

</script>

我想使用 v-for 获取数据库中的所有类别并使用 category.name 设置一个或多个类别，我如何存储类别数组，我只想知道。

这是布局（如果它可能有用，紫色将是被选中的）：