Vue3后台管理系统二集成Pinia

目录

一、安装Pinia

二、Pinia全局注册

三、Pinia模块封装

四、使用Pinia

一、安装Pinia

npm install pinia

二、Pinia全局注册

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

1.  
   // src/store/index.ts
2.  
   import type { App } from 'vue';
3.  
   import { createPinia } from 'pinia';
4.  
    
5.  
   const store = createPinia();
6.  
    
7.  
   // 全局挂载store
8.  
   export function setupStore(app: App<Element>) {
9.  
   app.use(store);
10.  
    }
11.  
     
12.  
    export { store };

2.修改main.ts为如下：

1.  
   // src/main.ts
2.  
   import {createApp} from 'vue'
3.  
   import './style.css'
4.  
   import App from './App.vue'
5.  
    
6.  
   import ElementPlus from 'element-plus'
7.  
   import 'element-plus/theme-chalk/index.css'
8.  
    
9.  
   import {setupStore} from '@/store';
10.  
     
11.  
    const app = createApp(App);
12.  
    // 全局挂载
13.  
    setupStore(app);
14.  
     
15.  
    app
16.  
    .use(ElementPlus)
17.  
    .mount('#app');

三、Pinia模块封装

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

1.  
   // src/store/modules/user/index.ts
2.  
   import { defineStore } from 'pinia';
3.  
    
4.  
   import { store } from '@/store';
5.  
   import { ref } from 'vue';
6.  
    
7.  
   export const useUserStore = defineStore('user', () => {
8.  
   // state
9.  
   const token = ref<string>('');
10.  
    const nickname = ref<string>('');
11.  
    const avatar = ref<string>('');
12.  
    const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
13.  
    const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
14.  
     
15.  
    // actions
16.  
     
17.  
    // 登录
18.  
    function login(loginData: any) {
19.  
    return new Promise<void>((resolve, reject) => {
20.  
    console.log(loginData)
21.  
    // loginApi(loginData) // 调用登录API
22.  
    });
23.  
    }
24.  
     
25.  
    // 获取信息(用户昵称、头像、角色集合、权限集合)
26.  
    function getInfo() {
27.  
    return new Promise<any>((resolve, reject) => {
28.  
    // getUserInfo() // 调用获取用户信息API
29.  
    });
30.  
    }
31.  
     
32.  
    // 注销
33.  
    function logout() {
34.  
    return new Promise<void>((resolve, reject) => {
35.  
    // logoutApi() // 调用注销API
36.  
    });
37.  
    }
38.  
     
39.  
    // 重置
40.  
    function resetToken() {
41.  
    // removeToken(); 调用删除Token方法
42.  
    token.value = '';
43.  
    nickname.value = '';
44.  
    avatar.value = '';
45.  
    roles.value = [];
46.  
    perms.value = [];
47.  
    }
48.  
    return {
49.  
    token,
50.  
    nickname,
51.  
    avatar,
52.  
    roles,
53.  
    perms,
54.  
    login,
55.  
    getInfo,
56.  
    logout,
57.  
    resetToken
58.  
    };
59.  
    });
60.  
     
61.  
    // 非setup
62.  
    export function useUserStoreHook() {
63.  
    return useUserStore(store);
64.  
    }

四、使用Pinia

①setup调用

②非setup调用

这篇好文章是转载于：学新通技术网