目录

一、安装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调用

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

②非setup调用

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