Pinia+Vue3状态响应性异常：寻求无需storeToRefs的解决方案

为什么你的写法会丢失响应性 #

1. 致命错误：未调用store创建函数
   你错误代码中的const { data, update } = useLocations没有调用useLocations()，直接解构了Pinia返回的store创建函数，而非实际的store实例，这是导致结果不符合预期的直接原因。

2. 即使调用函数，toRefs配合Pinia store的响应性问题
   假设修正为const { data, update } = useLocations()，此时响应性仍会失效的原因是：
   Pinia的store实例本质是一个reactive对象，当你在store内部用toRefs把reactive状态拆分为ref返回后，这些ref会被store这个reactive对象自动解包，最终解构出来的data是普通数值而非ref。一旦完成解构，这个变量就和原状态失去了响应式绑定，后续update修改状态时，它不会同步更新。

无需storeToRefs的解决方案 #

以下几种方案都能避免使用storeToRefs，且只需调用一次store函数：

方案1：直接使用store实例，不解构 #

这是最简单的方式，直接保留store实例的引用，通过实例访问状态和方法：

<script setup>
import { useLocations } from './useLocations.js'

const store = useLocations()
store.update()
console.log(store.data) // 输出2
</script>

方案2：store返回整个reactive状态对象 #

在store中把状态封装为一个reactive对象整体返回，组件里解构这个对象后，通过对象访问状态（保持响应性）：

// useLocations.js
import { defineStore, reactive } from 'pinia'

export const useLocations = defineStore('useLocations', () => {
    const state = reactive({
        data: 1
    })

    const update = () => {
        state.data = 2
    }

    return {
        state,
        update
    }
})

<script setup>
import { useLocations } from './useLocations.js'

const { state, update } = useLocations()
update()
console.log(state.data) // 输出2
</script>

方案3：用独立ref定义状态 #

直接用ref单独定义每个状态变量，而非包裹在reactive中，组件通过store实例访问状态（自动解包后的值）：

// useLocations.js
import { defineStore, ref } from 'pinia'

export const useLocations = defineStore('useLocations', () => {
    const data = ref(1)

    const update = () => {
        data.value = 2
    }

    return {
        data,
        update
    }
})

<script setup>
import { useLocations } from './useLocations.js'

const store = useLocations()
store.update()
console.log(store.data) // 输出2
</script>

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