一起吹过的晚风就算相拥 — Vue Admin Work 与 Pinia的邂逅相拥---Pinia实战篇

176 阅读2分钟

前言

了解过Vue Admin Work 中后台系列框架的小伙伴们都应该知道,在VueAdminWork中我状态管理我们一直是采用的 Vuex 这个经典框架 。Vuex 确实功能很强大,而且也很稳定,我在多个项目中都使用这个框架做状态管理。

一次偶然的机会我接触到了 Pinia 这个新的状态管理工具,虽然它的文档现在只有英文版的,但细读下来觉得 Pinia 的设计非常之美,它,轻量,耦合性很低,宛如出水芙蓉,让人爱怜。

所以我决定把 Vue Admin Work系列中的Vuex全部替换成Pinia

引入

// 在命令行中执行
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/piniaconst 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 Cookies from 'js-cookie'

const defaultAvatar = Avatar

const userInfo: UserState = JSON.parse(localStorage.getItem(USER_INFO_KEY) || '{}')

const useUserStore = defineStore('user', {

state: () => {

    return {

    userId: userInfo.userId || 0,

    roleId: userInfo.roleId || 0,

    }
},

actions: {

    saveUser(userInfo: UserState) {

    return new Promise<void>((res) => {

    this.userId = userInfo.userId

    this.userId = userInfo.userId

    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 = ''

            Cookies.remove(TOKEN_KEY)

            localStorage.clear()

            layoutStore.reset()

            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(data as UserState)
})
}

以上便是 userStore 的基础用法。如果在其它的 vue文件中使用,也是直接使用 useUserStore() 就可以

总结

总体来说 pinia 的基本使用还是比较简单的,相比于 Vuex的复杂操作,方便很多。当然还有很多细节需要大家再仔细思考,

比如:pinia 是 如何和 各个模块发生关联的,我们在使用的时候 直接 useUserStore了,没有地方和 pinia 进行关联。

带着很多问题,我们下期文章再见