1 11.引入vuex状态管理用户信息

https://vuex.vuejs.org/

• 安装

npm install vuex@next --save

• 管理用户信息

创建 store 文件夹： src/store/index.js

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
    state() {
        return {
            // 用户信息
            user: {}
        }
    },
    mutations: {
        // 记录用户信息
        SET_USERINFO(state, user) {
            state.user = user
        }
    }
})

export default store

• 注册到入口文件

main.js

...略
import store from './store'  // +

app.use(store)               // +

• 修改 login.vue

登录获取用户信息，保存到 store 里

...略
import { useStore } from 'vuex'
const store = useStore()


...略

            // 测试携带 Toekn 访问自己个人信息
            getinfo().then(res2=>{
                store.commit("SET_USERINFO",res2) // +
                console.log(res2)
            })

• 测试渲染保存的信息

index.vue

<template>
    <div>
        后台首页

        {{ $store.state.user }}
    </div>
</template>

<script setup></script>