Vue3中使用Pinia

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: {},
        }
    }
})