https://pinia.vuejs.org/zh/getting-started.html

1、安装pinia

npm install pinia

{"name": "pro20-schedule","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"axios": "^1.6.2","element-plus": "^2.4.2","pinia": "^2.1.7","vue": "^3.3.8","vue-router": "^4.2.5"},"devDependencies": {"@vitejs/plugin-vue": "^4.5.0","vite": "^5.0.0"}
}

2、store/sysUserStore.js

import {defineStore} from "pinia";export const userStore = defineStore('sysUser',{state:()=>{return{uid: 1,}},getters: {},actions:{},
})

3、Login.vue

<script setup></script><template><div class="common-layout"><el-container><el-header height="120px">&nbsp;</el-header><el-container><el-aside width="36%">&nbsp;</el-aside><el-container><el-main><el-form :model="form" label-width="120px"><el-form-item label="用户名："><el-input v-model="form.username" input-style="width:200px"/></el-form-item><el-form-item label="密&nbsp&nbsp码："><el-inputv-model="form.userPwd"type="password"placeholder="Please input password"show-passwordinput-style="width:200px"/></el-form-item><el-form-item><el-button type="primary" @click="doLogin">登录</el-button><el-button>注册</el-button></el-form-item></el-form></el-main><el-footer>&nbsp;</el-footer></el-container></el-container></el-container></div>
</template><script lang="ts" setup>
import {reactive} from 'vue'
import {login} from "../api/sysUser.js";
import router from "../router/router.js";
import {userStore} from "../store/sysUserStore.js";let currUser = userStore();// do not use same name with ref
const form = reactive({username: 'lina',userPwd: '123456',
})const doLogin = async () => {let response = await login(form);let {code, flag, data, msg} = response.data;//console.log(data)if (code === 200 && flag) {currUser.uid=data.uidawait router.push('/index');}
}
</script>

4、main.js

import { createApp } from 'vue'
import App from './App.vue'import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'import router from "./router/router.js";import {createPinia} from 'pinia'let app = createApp(App);let pinia = createPinia();app.use(router)
app.use(pinia)
app.use(ElementPlus, {locale: zhCn,
})
app.mount('#app')

 5、Pinia

Pinia是Vue 3的一个官方状态管理库。它的存在主要是为了解决Vue 3中状态管理的问题。

在Vue 2中，我们通常使用Vuex来进行状态管理。Vuex使得我们能够在应用的不同部分之间共享状态，这对于构建大型、复杂的应用程序非常有用。然而，Vuex使用起来比较复杂，需要编写大量的代码，这对于简单的项目来说可能过于繁琐。

另一方面，Vue 3引入了Composition API，这是一个新的、更灵活的状态管理机制。Composition API让我们能够更清晰地组织代码，并且可以更轻松地进行单元测试。然而，Composition API并不提供像Vuex那样的集中式状态管理，这可能会导致在应用的不同部分之间共享状态变得困难。

Pinia就是在这种情况下出现的。它是Vue 3的官方状态管理库，旨在提供一种简单、易用的方式来在应用的不同部分之间共享状态。Pinia基于Vue 3的Composition API构建，因此它能够充分利用Composition API的优点，同时提供集中式状态管理的功能。

使用Pinia，我们可以在组件之间共享状态，而无需编写大量的代码。Pinia还提供了一些有用的功能，如将多个状态存储组合在一起、对状态进行持久化等。这使得我们能够更轻松地管理状态，同时保持代码的清晰和可维护性。