在 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 响应式代理。