Pinia =>state数据存储

1.创建pinia实例

store==>index.ts

import { createPinia } from 'pinia'
export const pinia = createPinia()

2.注册pinia插件

main.ts

import { pinia } from './store/index.ts';
const app = createApp(App);

// 注册 Pinia
app.use(pinia);

3.定义pinia

store==>user.ts

//用户相关仓库
import { defineStore } from "pinia";

export const useUserStore = defineStore('User', () => {

    //控制登录框Dialog是否显示的state
    const showLogin = false

    return {
        showLogin
    }
})

4.组件使用store

<script setup>
import { useUserStore } from "../../store/modules/user"

const userStore = useUserStore()
// 登录框的显示和隐藏
const login = () => {
  userStore.showLogin = true
}
</script>