SSM项目实战-前端-将uid存放在pinia中

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-input
                    v-model="form.userPwd"
                    type="password"
                    placeholder="Please input password"
                    show-password
                    input-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.uid
     await 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还提供了一些有用的功能，如将多个状态存储组合在一起、对状态进行持久化等。这使得我们能够更轻松地管理状态，同时保持代码的清晰和可维护性。