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

  

    
      
      
        
        
          
            
              
                
              
              
                
              

              
                登录
                注册
              
            
          
          
        
      
    
  



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');
  }
}

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让我们能够更清晰地组织代码，并且可以更轻松地进行单元测试。然而，Compositi服务器托管网on API并不提供像Vuex那样的集中式状态管理，这可能会导致在应用的不同部分之间共享状态变得困难。

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

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net