Vue3+Pinia中getter筛选商品列表点击后视图不更新问题

一共三处核心写法错误，外加一处异步逻辑隐患：

1. 逻辑完全断层：你把showProducts这个getter当成点击事件的回调调用，但getter本身是取值计算函数，不会修改任何状态。点击按钮时你虽然传了分类ID调用它，但既没有把返回的过滤结果存到响应式变量里，也没有记录当前选中的分类，属于完全无效的调用。
2. 渲染逻辑硬编码：商品列表的v-for直接写死了showProducts('all')，不管你点击什么按钮，渲染时永远取全量商品数据，自然不会出现筛选后的结果。
3. 响应式丢失风险：你直接从store实例解构showProducts getter，脱离了Pinia的响应式代理上下文，即使后续依赖变化，也可能无法触发视图更新。
4. 异步逻辑不规范：getProducts action虽然标记了async，但内部没有await异步请求，存在异步时序隐患，极端场景下会出现数据未返回就完成渲染的问题。另外defineStore已经通过第一个参数指定了store id，配置对象内重复写id字段属于冗余写法，会触发控制台警告。

1. 在组件内新增响应式变量selectedCategoryId，初始值设为'all'，专门记录当前选中的分类ID。
2. 修改分类按钮的点击逻辑：点击时只更新selectedCategoryId的值，不要把getter当状态修改方法调用。
3. 修改商品列表渲染逻辑，把selectedCategoryId作为参数传给showProducts，去掉硬编码的'all'参数。
4. 仅用storeToRefs解构store的state属性，getter和action直接通过store实例访问，避免响应式丢失。
5. 补全getProducts的异步等待逻辑，删除冗余的id配置。

修复后的组件代码 #

<script setup>
import {useProductStore} from "@/store/products";
import {ref, onMounted} from "vue";
import {storeToRefs} from "pinia";

const productStore = useProductStore()
// 仅解构state属性，避免getter/action解构丢失响应式
const { products, categories } = storeToRefs(productStore)

// 记录当前选中的分类ID，默认展示全部商品
const selectedCategoryId = ref('all')

// 页面挂载时拉取商品和分类数据
onMounted(() => {
  productStore.getProducts()
})
</script>

<template>
  <div>
    <div class="row">
      <div class="col-md-2">
        <button 
          class="d-block w-100"
          @click="selectedCategoryId = 'all'"
        >
          All
        </button>
        <button 
          class="d-block w-100"
          v-for="category in categories"
          :key="category.id"
          @click="selectedCategoryId = category.id"
        >
          {{ category.name }}
        </button>
      </div>
      <div class="col">
        <!-- 动态传入当前选中的分类ID，自动触发视图更新 -->
        <p 
          v-for="product in productStore.showProducts(selectedCategoryId)"
          :key="product.id"
        >
          {{ product.name }}
        </p>
      </div>
    </div>
  </div>
</template>

修复后的Pinia Store代码 #

import { defineStore } from 'pinia'
import axiosClient from '@/axios'

export const useProductStore = defineStore('products', {
    state: () => {
        return {
            products: [],
            categories: [],
        }
    },
    actions: {
        async getProducts() {
            // 补全await，统一异步写法
            const response = await axiosClient.get('products')
            const data = response.data
            this.products = data.products
            this.categories = data.categories
        }
    },
    getters: {
        showProducts: (state) => (categoryID) => {
            if(categoryID === 'all') {
                return state.products
            }
            return state.products.filter((product) => product.productCategoryID == categoryID)
        }
    },
})

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