本地部署Perplexity 克隆：使用Llama 3.1实现高效搜索

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