前言
了解过Vue Admin Work 中后台系列框架的小伙伴们都应该知道，在VueAdminWork中我状态管理我们一直是采用的 Vuex 这个经典框架 。Vuex 确实功能很强大，而且也很稳定，我在多个项目中都使用这个框架做状态管理。
一次偶然的机会我接触到了 Pinia 这个新的状态管理工具，虽然它的文档现在只有英文版的，但细读下来觉得 Pinia 的设计非常之美，它，轻量，耦合性很低，宛如出水芙蓉，让人爱怜。
所以我决定把 Vue Admin Work系列中的Vuex全部替换成Pinia
之前也有写过两篇关于Pinia的文章，算上这篇是第三篇，可以去历史文章查看。
关注我持续分享更多的干货给大家
引入
// 在命令行中执行，需要注意的是需要Vue的版本是3.2.26及以上才可以安装成功 npm i pinia
在引入成功之后，就开始创建文件，这里以VueAdminWork项目为示例。
创建相关文件
- 创建 pinia.ts
在 src/store文件夹下创建名为: pinia.ts 的 ts 文件，内容为：
import { createPinia } from 'pinia' export default createPinia()
然后在 src/main.ts 中引入并使用
import pinia from './store/pinia const app = createApp(App) app.use(pinia)
在创建并使用好 pinia 之后，我们就可以真正的开始做关于业务相关的模块了
- 创建业务相关的模块，这里以 user 为例
在 src/store文件夹下创建名 modules 的文件夹并且创建一个名为: user.ts 的 ts 文件，内容为：
import { defineStore } from 'pinia' import { UserState } from '../types' import layoutStore from '../index' import Avatar from '@/assets/img_avatar.gif' import Cookies from 'js-cookie' const defaultAvatar = Avatar const useUserStore = defineStore('user', { state: () => { return { userId: userInfo.userId || 0, roleId: userInfo.roleId || 0, roles: userInfo.roles || [], token: userInfo.token || '', userName: userInfo.userName || '', nickName: userInfo.nickName || '', avatar: userInfo.avatar || defaultAvatar, } }, getters: { userRoleCode: (state) => { return state.roles.map((it) => it.roleCode) }, }, actions: { saveUser(userInfo: UserState) { return new Promise<void>((res) => { this.userId = userInfo.userId this.userId = userInfo.userId this.token = userInfo.token this.roleId = userInfo.roleId this.roles = userInfo.roles this.userName = userInfo.userName this.nickName = userInfo.nickName this.avatar = userInfo.avatar || defaultAvatar res() }) }, changeNickName(newNickName: string) { this.nickName = newNickName }, logout() { return new Promise<void>((resolve) => { this.userId = 0 this.avatar = '' this.roleId = 0 this.roles = [] this.userName = '' this.nickName = '' this.token = '' resolve() }) }, }, }) export default useUserStore
然后在真正使用的地方去引入，比如我们在登录成功之后就保存一下用户的信息
/src/views/login.vue
// 直接在 login的 setup中引入使用，拿到userStore对象 const userStore = useUserStore() const onLogin = () => { loading.value = true post({ url: login, data: { username: username.value, password: password.value, }, }) .then(({ data }: Response) => { // 通过 userStore对象的 saveUser 方法，保存用户的信息 userStore.saveUser(data as UserState).then(() => { router .replace({ path: route.query.redirect ? (route.query.redirect as string) : '/', }) .then(() => { loading.value = false }) }) }) .catch((error) => { loading.value = false message.error(error.message) }) }
以上便是 userStore 的基础用法。如果在其它的 vue文件中使用，也是直接使用 useUserStore() 就可以
总结
总体来说 pinia 的基本使用还是比较简单的，相比于 Vuex的复杂操作，方便很多。当然还有很多细节需要大家再仔细思考，
比如：pinia 是 如何和 各个模块发生关联的，我们在使用的时候 直接 useUserStore了，没有地方和 pinia 进行关联。
带着很多问题，我们下期文章再见
