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:<any>[]
}
},
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 //啓用插件
}
})