前言
了解过Vue Admin Work 中后台系列框架的小伙伴们都应该知道，在VueAdminWork中我状态管理我们一直是采用的 Vuex 这个经典框架 。Vuex 确实功能很强大，而且也很稳定，我在多个项目中都使用这个框架做状态管理。
一次偶然的机会我接触到了 Pinia 这个新的状态管理工具，虽然它的文档现在只有英文版的，但细读下来觉得 Pinia 的设计非常之美，它，轻量，耦合性很低，宛如出水芙蓉，让人爱怜。
所以我决定把 Vue Admin Work系列中的Vuex全部替换成Pinia
之前也有写过两篇关于Pinia的文章，算上这篇是第三篇，可以去历史文章查看。
关注我持续分享更多的干货给大家
引入
代码语言：javascript复制// 在命令行中执行，需要注意的是需要Vue的版本是3.2.26及以上才可以安装成功
npm i pinia在引入成功之后，就开始创建文件，这里以VueAdminWork项目为示例。
创建相关文件
- 创建 pinia.ts
在 src/store文件夹下创建名为: pinia.ts 的 ts 文件，内容为：
代码语言：javascript复制import { createPinia } from 'pinia'
export default createPinia()然后在 src/main.ts 中引入并使用
代码语言：javascript复制import pinia from './store/pinia
const app = createApp(App)
app.use(pinia)在创建并使用好 pinia 之后，我们就可以真正的开始做关于业务相关的模块了
- 创建业务相关的模块，这里以 user 为例
在 src/store文件夹下创建名 modules 的文件夹并且创建一个名为: user.ts 的 ts 文件，内容为：
代码语言：javascript复制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
代码语言：javascript复制// 直接在 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 进行关联。
带着很多问题，我们下期文章再见
