Pinia组合式Store中Getter无响应性问题咨询

你的问题出在组件对getter的引用方式上，而非Store里的getter定义。

原因拆解 #

• getterOne返回的是someArray这个ref对象本身，myStore.getterOne是一个响应式ref，组件里的foo指向这个ref，自然能追踪到状态变化。
• getterTwo返回的是具体数值（someArray.value.length），当你直接赋值const bar = myStore.getterTwo时，相当于取了该数值的当前快照，没有建立响应式依赖，所以后续状态变化时bar不会自动更新。

修复方案 #

要让bar具备响应性，有三种常用方式：

1. 模板直接引用
   Vue模板会自动追踪响应式依赖，直接在模板里写：

<template>
  <div>{{ myStore.getterTwo }}</div>
</template>

2. 用computed包裹
   在组件setup中通过computed建立响应式依赖：

import { useMyStore } from 'stores/myStore';
import { computed } from 'vue';

const myStore = useMyStore();
const bar = computed(() => myStore.getterTwo);

3. 用storeToRefs解构
   借助Pinia提供的storeToRefs工具，解构出保持响应性的ref：

import { useMyStore } from 'stores/myStore';
import { storeToRefs } from 'pinia';

const myStore = useMyStore();
const { getterTwo } = storeToRefs(myStore);
// getterTwo 是响应式ref，可直接使用

补充说明 #

Pinia的getter本身是具备响应性的，你在Store中的定义没有问题，只是组件引用时的方式导致了响应性丢失。

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