Vue3后台管理系统（二）集成Pinia

爱被打了一巴掌 2024-03-26 11:57 80阅读 0赞

**目录**

一、安装Pinia

二、Pinia全局注册

三、Pinia模块封装

四、使用Pinia

--------------------

#### 一、安装Pinia ####

npm install pinia

#### 二、Pinia全局注册 ####

1.在src下新建store文件夹，然后在store文件夹下新建index.ts内容如下：

// src/store/index.ts
    import type { App } from 'vue';
    import { createPinia } from 'pinia';
     
    const store = createPinia();
     
    // 全局挂载store
    export function setupStore(app: App<Element>) {
      app.use(store);
    }
     
    export { store };

2.修改main.ts为如下：

// src/main.ts
    import {createApp} from 'vue'
    import './style.css'
    import App from './App.vue'
     
    import ElementPlus from 'element-plus'
    import 'element-plus/theme-chalk/index.css'
     
    import {setupStore} from '@/store';
     
    const app = createApp(App);
    // 全局挂载
    setupStore(app);
     
    app
        .use(ElementPlus)
        .mount('#app');

#### 三、Pinia模块封装 ####

1.在store文件夹下新建modules文件夹，这里以用户状态为例：在modules文件夹下新建user文件夹，在于user文件夹下新建index.ts和types.ts内容如下：

// src/store/modules/user/index.ts
    import { defineStore } from 'pinia';
     
    import { store } from '@/store';
    import { ref } from 'vue';
     
    export const useUserStore = defineStore('user', () => {
        // state
        const token = ref<string>('');
        const nickname = ref<string>('');
        const avatar = ref<string>('');
        const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
        const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
     
        // actions
     
        // 登录
        function login(loginData: any) {
            return new Promise<void>((resolve, reject) => {
                console.log(loginData)
                // loginApi(loginData) // 调用登录API
            });
        }
     
        // 获取信息(用户昵称、头像、角色集合、权限集合)
        function getInfo() {
            return new Promise<any>((resolve, reject) => {
                // getUserInfo() // 调用获取用户信息API
            });
        }
     
        // 注销
        function logout() {
            return new Promise<void>((resolve, reject) => {
                // logoutApi() // 调用注销API
            });
        }
     
        // 重置
        function resetToken() {
            // removeToken(); 调用删除Token方法
            token.value = '';
            nickname.value = '';
            avatar.value = '';
            roles.value = [];
            perms.value = [];
        }
        return {
            token,
            nickname,
            avatar,
            roles,
            perms,
            login,
            getInfo,
            logout,
            resetToken
        };
    });
     
    // 非setup
    export function useUserStoreHook() {
        return useUserStore(store);
    }

#### 四、使用Pinia ####

**①setup调用**

![4266dc6c9eba4c25a4b0eaea47159616.png][]

**②非setup调用**

![5f2afd55025740b0b2d74a4859b1b5ad.png][]

[4266dc6c9eba4c25a4b0eaea47159616.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/4469709084c4404d9f3598fd65395154.png
[5f2afd55025740b0b2d74a4859b1b5ad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/67f745eae5e44e55a71b5c0564fee1cb.png