storeToRefs解决pinia仓库解构赋值响应式丢失

在 Vue 3 中使用 Pinia 作为状态管理库时，如果尝试通过解构赋值的方式来获取 Pinia store 中的状态，并期望这些解构出来的变量保持响应性，可能会遇到响应性丢失的问题。这是因为解构赋值本质上会创建原始数据的浅拷贝，而这些拷贝并不是响应式的。

定义store

import { defineStore } from 'pinia'
export const usePermissionStore = defineStore('permissionStore', {
  state: () => ({
    hasLoaded: false, // 是否已加载
    // 路由权限
    permissionList: []
  }),
  actions: {
    setHasLoaded(data: any) {
      this.hasLoaded = data
    },
    getHasLoaded() {
      return this.hasLoaded
    },
    setPermissionList(data: any) {
      this.permissionList = data
    },
    getPermissionList() {
      return this.permissionList
    }
  }
})

storeToRefs转响应式

Pinia官方给我们提供了一个API，叫做storeToRefs，可以结构容器获得响应式数据，如下：

import { usePermissionStore } from '@/store/modules/permissionStore'
import { storeToRefs } from 'pinia'

//这是有问题的，因为这样拿到的数据是一次性的，不是响应式的
//const { hasLoaded, permissionList } = usePermissionStore()
const usePermission = usePermissionStore()
const { hasLoaded, permissionList } = storeToRefs(usePermission)

原理

如果我们直接使用const { hasLoaded, permissionList } = usePermissionStore()这种方法的话，Pinia其实是把state中的数据都做了reactive处理，其实是没用的。

但是我们使用const { hasLoaded, permissionList } = storeToRefs(usePermission)的话，会把解构出来的数据做 ref 响应式代理。