interface.d.ts文件

export interface useMyStore {id: stringcontent: stringtype: stringstatus: booleancollected: booleandate: stringquality: string
}

useMyStore.js文件

const msgData = [{id: '123',content: '腾讯大厦一楼改造施工项目 已通过审核！',type: '合同动态',status: true,collected: false,date: '2021-01-01 08:00',quality: 'high',},{id: '124',content: '三季度生产原材料采购项目 开票成功！',type: '票务动态',status: true,collected: false,date: '2021-01-01 08:00',quality: 'low',},
]type MsgDataType = typeof msgData;export const useMyStore = defineStore('useMyStore', {state: () => ({msgData,}),getters: {unreadMsg: (state) => state.msgData.filter((item: useMyStore) => item.status),readMsg: (state) => state.msgData.filter((item: useMyStore) => !item.status),},actions: {setMsgData(data: MsgDataType) {this.msgData = data},},persist: true,
})

index.vue文件

import { storeToRefs } from 'pinia'
import { useMyStore } from '@/store'const myStore = useMyStore()
const { msgData, unreadMsg, readMsg } = storeToRefs(myStore)

storeToRefs 是 Pinia 库中的一个辅助函数，用于将存储对象（store）中的属性转换为响应式的引用。

在上面的例子中，

使用 storeToRefs 函数将存储对象 myStore 中的 msgData、unreadMsg 和 readMsg 属性转换为响应式的引用，

这意味着当存储对象中的这些属性发生变化时，引用也会相应地更新。

这样做的好处是，

我们可以在组件中直接使用 msgData、unreadMsg 和 readMsg 这些响应式引用，而不需要手动调用 ref 函数创建响应式引用，

这样可以简化代码，并确保在模板中使用这些属性时能够保持响应式。

总之，storeToRefs 函数是用于将存储对象中的属性转换为响应式引用的便捷方法，有助于简化在 Vue 3 中使用 Pinia 进行状态管理的过程。