Pinia 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)。 如果您熟悉 Composition API，您可能會認為您已經(jīng)可以通過一個簡單的 export const state = reactive({}). 這對于單頁應(yīng)用程序來說是正確的，但如果它是服務(wù)器端呈現(xiàn)的，會使您的應(yīng)用程序暴露于安全漏洞。

1、安裝pinia

npm i pinia

2、引入Pinia

// main.ts 引入及應(yīng)用
import { createPinia } from 'pinia'
// 第二步:創(chuàng)建pinia
const pinia = createPinia()
// 第三步:安裝pinia
app.use(pinia)

3、store文件夾里創(chuàng)建用戶信息相關(guān)的user.ts

import { defineStore } from'pinia'

export const useuserstore = defineStore ('userInfo',{
    //真正存儲數(shù)據(jù)的地方
    state() {
        return {
            userInfo: { account: 'admin', password: '123456' },
        }
    }
})

4、應(yīng)用

import {useuserstore} from "@/store/user.ts";

1、第一種方法
const userStore = useuserstore()
console.log(userStore.userInfo)
// 修改store
userStore.$patch({
 account: 'user', password: '123456'
})
console.log(userStore.userInfo)

2、第二種方法
export const useuserstore = defineStore ('userInfo',{
    actions: {
        setUserInfo(userInfo: any){
            this.userInfo = userInfo
        }
    },
    //真正存儲數(shù)據(jù)的地方
    state() {
        return {
            userInfo: {},
        }
    }
})