如何向子组件提供Pinia响应式属性并保留其响应性？

核心问题 #

直接传递dispatchStore.selectedDivisionId这类属性时，本质是提取了当前时刻的原始值（如字符串、数字），断开了与Pinia响应式系统的绑定，导致子组件无法感知store状态更新。要保留响应性，需传递能实时追踪store状态变化的引用或访问方式。

可行方案 #

方案1：用计算属性（Computed Refs）包装 #

computed返回的是响应式Ref对象，能实时同步store状态变化，子组件可通过.value访问（模板中Vue会自动解包）。

修改后的代码：

import { DivisionsProvider } from '../symbols'
import { computed } from 'vue'
const dispatchStore = useDispatchStore()

provide(DivisionsProvider, {
    jobsData,
    // 用computed包装，保留响应性连接
    selectedDivisionId: computed(() => dispatchStore.selectedDivisionId),
    selectedDivisionStatus: computed(() => dispatchStore.selectedDivisionStatus),
    onSelectDivisionId,
    onSelectDivisionStatus,
    getStatusesWithJobCounts
})

子组件使用示例：

import { inject } from 'vue'
import { DivisionsProvider } from '../symbols'

const provider = inject(DivisionsProvider)
// 脚本中需加.value，模板中直接写provider.selectedDivisionId即可
console.log(provider.selectedDivisionId.value)

方案2：传递访问器函数 #

通过返回store属性的函数，让子组件每次调用时都获取最新值，间接实现响应性（适合模板场景，函数调用会在依赖更新时自动重新执行）。

修改后的代码：

import { DivisionsProvider } from '../symbols'
const dispatchStore = useDispatchStore()

provide(DivisionsProvider, {
    jobsData,
    // 传递函数实时获取最新值
    getSelectedDivisionId: () => dispatchStore.selectedDivisionId,
    getSelectedDivisionStatus: () => dispatchStore.selectedDivisionStatus,
    onSelectDivisionId,
    onSelectDivisionStatus,
    getStatusesWithJobCounts
})

子组件模板使用：

<template>
  <div>当前选中部门ID：{{ provider.getSelectedDivisionId() }}</div>
</template>

<script setup>
import { inject } from 'vue'
import { DivisionsProvider } from '../symbols'

const provider = inject(DivisionsProvider)
</script>

方案3：基于Reactive对象的Getter #

创建包含store属性getter的reactive对象，子组件可直接访问属性（无需.value），同时保留响应性。

修改后的代码：

import { DivisionsProvider } from '../symbols'
import { reactive } from 'vue'
const dispatchStore = useDispatchStore()

const divisionState = reactive({
  get selectedDivisionId() { return dispatchStore.selectedDivisionId },
  get selectedDivisionStatus() { return dispatchStore.selectedDivisionStatus }
})

provide(DivisionsProvider, {
    jobsData,
    ...divisionState,
    onSelectDivisionId,
    onSelectDivisionStatus,
    getStatusesWithJobCounts
})

关键原理 #

Pinia的状态属性本身是响应式的，但直接赋值会丢失响应性上下文。上述方案通过延迟读取（computed、函数、getter）的方式，每次访问都从store的响应式系统中获取最新值，从而维持了状态更新的联动。

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