pinia 配置学习

Pinia 起始于 2019 年 11 月左右的一次实验，其目的是设计一个拥有组合式 API 的 Vue 状态管理库。从那时起，我们就倾向于同时支持 Vue 2 和 Vue 3，并且不强制要求开发者使用组合式 API，我们的初心至今没有改变。除了安装和 SSR 两章之外，其余章节中提到的 API 均支持 Vue 2 和 Vue 3。虽然本文档主要是面向 Vue 3 的用户，但在必要时会标注出 Vue 2 的内容，因此 Vue 2 和 Vue 3 的用户都可以阅读本文档。

TIP

更多详情，请参见官网：官方文档

pinia 安装

npm install pinia

main.ts 中引入并使用

// 引入仓库
import pinia from './store'
// 安装仓库
app.use(pinia)

文件夹结构

project root/
    |-- src/
        |-- store/
            |-- index.ts  // 仓库主文件
            |-- modules/  // 小仓库
                |-- user.ts  // 用户小仓库

index.ts 文件内容

// 大仓库
import { createPinia } from 'pinia'

// 创建仓库
let pinia = createPinia()

// 对外暴露：入口文件main.ts 需要安装pinia
export default pinia

user.ts 文件内容

// user.ts
// 创建用户相关的小仓库

import { defineStore } from 'pinia'
// 引入接口
import { reqLogin } from '@/api/user'
// 引入下数据类型
import type { loginForm } from '@/api/user/type'
// 创建用户小仓库
let useUserStore = defineStore('User', {
    // 小仓库存储数据的地方
    state: () => {
        return {
            // 用户唯一标识
            token: localStorage.getItem('TOKEN') || '',
        }
    },
    // 处理异步或逻辑的地方
    actions: {
        // 处理用户登录的方法
        async userLogin(data: loginForm) {
            // 登录请求
            const res: any = await reqLogin(data)
            // 登录成功：200 -> token
            if (res.code === 200) {
                // pinia 仓库存储token
                this.token = res.data.token
                // 本地持久化存储Token
                localStorage.setItem('TOKEN', res.data.token)
                // 成功后返回一个成功的promise
                return 'ok'
            } else {
                // 登录失败：201
                return Promise.reject(new Error(res.data.message))
            }
        },
    },
    getters: {},
})

// 对外暴露获取小仓库的方法
export default useUserStore