Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。 如果您熟悉 Composition API，您可能会认为您已经可以通过一个简单的 export const state = reactive({}). 这对于单页应用程序来说是正确的，但如果它是服务器端呈现的，会使您的应用程序暴露于安全漏洞。
1、安装pinia
npm i pinia
2、引入Pinia
// main.ts 引入及应用
import { createPinia } from 'pinia'
// 第二步:创建pinia
const pinia = createPinia()
// 第三步:安装pinia
app.use(pinia)
3、store文件夹里创建用户信息相关的user.ts
import { defineStore } from'pinia'
export const useuserstore = defineStore ('userInfo',{
//真正存储数据的地方
state() {
return {
userInfo: { account: 'admin', password: '123456' },
}
}
})
4、应用
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
}
},
//真正存储数据的地方
state() {
return {
userInfo: {},
}
}
})
