Vue 3组件中Pinia Store的正确用法及常见疑问解答

选项对比 #

选项A #

const fooStore = useFooStore();

function bar() {
  return fooStore.bar
}

const compProp = computed(() => fooStore.someProp)

选项B #

function bar() {
  return useFooStore().bar
}

const compProp = computed(() => useFooStore().someProp())

疑问解答 #

1. 两种调用Store的方式是否存在差异？ #

有明确差异：

• 选项A是在组件初始化时获取一次Store实例，之后全程复用这个实例；
• 选项B是每次执行函数或computed计算时，都调用useFooStore()来获取实例。

不过要说明：Pinia的useFooStore()在同一个组件上下文里多次调用，返回的是同一个实例——也就是说选项B每次拿到的都是同一个Store对象，但调用时机和写法的不同会带来其他层面的影响。

2. 在Option A中，能否确保获取到Store中的最新值？ #

完全可以。Pinia的Store状态是响应式的，直接访问Store的属性（比如fooStore.bar）时，Vue的响应式系统会自动追踪依赖。当Store里的属性更新时，组件中用到它的地方（包括computed、模板）都会自动更新。选项A里的compProp基于响应式Store属性创建，能实时拿到最新值；函数bar每次执行时也是直接读取当前Store的属性值，同样是最新的。

3. Option B是否存在性能不佳的情况？ #

分情况讨论：

• 首先，useFooStore()本身在同一组件内多次调用的开销极低，因为Pinia会缓存组件内的Store实例，不会每次都创建新对象；
• 但选项B的computed中调用了useFooStore().someProp()——如果someProp是一个方法（而非响应式属性），那每次computed重新计算时都会执行这个方法，要是方法包含复杂逻辑，就会额外消耗性能；另外，重复调用useFooStore()会增加代码冗余，不利于后续维护。

另外，如果在非组件上下文（比如普通工具函数）里用选项B的写法，还可能出现找不到Pinia实例的错误，虽在组件内暂时不会有问题，但写法不够严谨。

4. 哪种是最优的实现方案？ #

选项A是更优、更符合官方推荐的方案，理由如下：

• 代码简洁：仅需获取一次Store实例，后续复用，减少重复代码；
• 依赖追踪清晰：直接复用实例属性，Vue响应式系统能更稳定地追踪依赖；
• 性能稳定：避免在computed或频繁执行的函数里重复调用useFooStore()，虽单次开销低，但积少成多，且写法更贴合Pinia的设计逻辑；
• 维护性强：所有Store相关访问都基于同一个实例，后续修改Store属性或方法时，更易定位和调整。

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