Pinia状态更新后组件未响应，如何让foo具备响应式？

问题根源 #

你定义的getFilteredArray getter返回了一个函数，直接调用该函数只会计算一次初始值，不会建立响应式依赖——当someArray或props.someProp变化时，foo不会自动更新。

解决方案 #

方法一：组件内用computed包裹计算逻辑 #

直接在组件中通过computed跟踪someStore.someArray和props.someProp的变化，这是最直接的方式：

<script setup>
import { useSomeStore } from '@/stores/someStore'
import { computed } from 'vue'

const someStore = useSomeStore();
const props = defineProps(['someProp']);

// 现在foo会响应someArray和someProp的变化
const foo = computed(() => someStore.someArray.filter(i => i._id === props.someProp));
</script>

方法二：保留store内的过滤逻辑（可选） #

如果希望把过滤逻辑留在store中，可以调整组件代码，用computed包裹getter的调用，以此建立响应式依赖：

// store代码（无需修改）
export const useSomeStore = defineStore('someStore', {
  state: () => ({ someArray: [] }),
  getters: {
    getFilteredArray: (state) => (id) => state.someArray.filter(i => i._id === id)
  }
});

// 组件代码修改如下
<script setup>
import { useSomeStore } from '@/stores/someStore'
import { computed } from 'vue'

const someStore = useSomeStore();
const props = defineProps(['someProp']);

// 用computed包裹getter调用，触发响应式跟踪
const foo = computed(() => someStore.getFilteredArray(props.someProp));
</script>

为什么之前的尝试无效 #

• 将getter改为action：action的作用是修改状态，并非提供响应式计算值，无法解决UI更新问题。
• 不解构仓库：直接调用getter返回的函数本身不会触发响应式跟踪，必须通过computed包裹才能建立依赖。
• 使用storeToRefs：它只能将store的state或getter转化为ref，但你需要的是调用getter函数后的结果，解构无法跟踪函数调用的响应式变化。

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