vue3 pinia 写法和 pinia 中数据 proxy 对象如何获取使用

main.ts

import pinia from '@/stores'
app.use(pinia); 引入store/index.ts中的pinia

store/index.ts
import { createPinia } from 'pinia'
import piniaPersist from 'pinia-plugin-persist'

const pinia = createPinia()
// 永久持久化插件
pinia.use(piniaPersist);
export default pinia

store/user.ts
// 使用持久化存储

import {defineStore} from 'pinia'
import { getMenusApi } from '@/api/user'
import { toRaw } from '@vue/reactivity'
export const useUserStore=defineStore('storeUser',{
    state:()=>{
        return{
            fistName:"",
            lastName:"",
            accessToken:"",
            meunList:[]
        }
    },
    getters:{
      getMeunList:(state)=>{
        return state.meunList
      }
    },
    actions:{
        setToken(value:string){
            this.accessToken=value
        },
        // 获取菜单
        getMenus() {
          let that=this;
            return new Promise((resolve, reject) => {
              getMenusApi().then((response:any) => {
                that.meunList= [{name:""}];
                // that.meunList= JSON.parse(response) ;
                console.log("数据00000000000",toRaw(that.meunList))
                localStorage.setItem('MerMenuList', JSON.stringify(response))
                resolve(response)
              }).catch(error => {
                reject(error)
              })
            })
          },
    },
    persist:{
        enabled:true //启用插件
    }
})

在页面中使用

import  {useUserStore}  from '@/stores/user'
import { toRaw } from '@vue/reactivity'
//使用vue3.0时，因为底层是使用proxy进行代理的，所以当我们打印一些值的时候，是proxy代理之后的是Proxy对象，Proxy对象里边的[[Target]]才是真实的对象。
let store=useUserStore();
store.getMenus() //调用actions方法
let meunList=toRaw(store.meunList)
//通过vue中的响应式对象可使用toRaw()方法获取原始对象 这样这个数据就可以直接使用了
console.log( meunList,"路由----")