vite+vue3+ts项目搭建之使用Pinia代替vuex及Pinia持久化处理

在线预览

• Link：https://wocwin.github.io/wocwin-admin/

前言

以下操作，是续接之前第二步——含插件使用及eslint&prettier配置
插件安装使用是重点（极大提高了开发效率）

一、使用Pinia代替vuex

1、安装pinia

npm install pinia

2、在src目录新建store文件夹，新建index.ts文件，代码如下：

// 因为用了“unplugin-auto-import”插件 可以不需要再import Pinia的API
// import { createPinia } from 'pinia'
// 创建pinia状态管理对象
const pinia = createPinia()
export default pinia

3、在main.ts文件中引入，代码如下：

// pinia代替vuex
import pinia from './store'
app.use(pinia)

4、在store文件夹中新建modules文件夹（当然也可以不建，我这是为了区分管理），新建user.ts文件，代码如下：

注意点：
一、使用 defineStore() 定义一个 Store ；defineStore() 第一个参数是 storeId （必须要），第二个参数是一个选项对象：中有state（是一个函数返回一个对象）、getters、actions
二、store 是一个用 reactive 包裹的对象，如果直接解构会失去响应性。我们可以使用 storeToRefs() 对其进行解构：

import { removeToken, setToken, getToken } from '@/utils/cookies'
import { login, logout, getInfo, getPermBtm } from '@/api/login'
import { ElMessage } from 'element-plus'
const useUserStore = defineStore('user',{
  state: () => {
    return {
      token: getToken() || '',
      name: '',
      avatar: '',
      roles: [] as any,
      nickName: '',
      userId: null,
      dept: {},
      permissions: [],
      permBtn: [],
      permCode: [],
    }
  },
  getters:{},
  actions: {
    // 登录
    Login(userInfo: any) {
      return new Promise((resolve: any, reject: any) => {
        login(userInfo)
          .then((res: any) => {
            if (res.success) {
              setToken(res.data)
              this.token = res.data
            } else {
              ElMessage.error(res?.msg)
            }
            resolve()
          })
          .catch((error: any) => {
            reject(error)
          })
      })
    },
    // 获取用户信息
    GetInfo() {
      if (this.token === '') {
        throw Error('token is undefined!')
      }
      getInfo().then(async (res: any) => {
        if (res?.success) {
          const user = res.data
          const avatar =
            user.avatar == ''
              ? require('@/assets/images/profile.jpg')
              : import.meta.env.VUE_APP_BASE_API + user.avatar
          if (user.roles && user.roles.length > 0) {
            // 验证返回的roles是否是一个非空数组
            this.roles = user.roles
          } else {
            this.roles = ['ROLE_DEFAULT']
          }
          this.name = user.userName
          this.avatar = avatar
          this.nickName = user.nickName
          this.userId = user.userId
          this.dept = user.dept
          //获取按钮权限
          await getPermBtm().then((btmRes: any) => {
            console.log('获取的按钮权限', btmRes)
            if (btmRes?.success && btmRes.data.length > 0) {
              const permBtn = btmRes.data.map((item: { menuId: any }) => item.menuId)
              const permCode = btmRes.data.map((item: { perms: any }) => item.perms || null)
              this.permBtn = permBtn
              this.permCode = permCode
              this.permissions = permCode
            }
          })
          return res
        } else {
          throw Error('Verification failed, please Login again.')
        }
      })
    },
    // 退出系统
    LogOut() {
      return new Promise((resolve: any, reject: any) => {
        logout()
          .then(() => {
            this.token = ''
            this.roles = []
            this.permissions = []
            removeToken()
            resolve()
          })
          .catch((error: any) => {
            reject(error)
          })
      })
    },
    // 前端退出
    FedLogOut() {
      removeToken()
      this.token = ''
      this.roles = []
      this.permissions = []
    }
  }
})
export default useUserStore

5、在页面中使用，代码如下：

import useUserStore from '@/store/modules/user'
const userStore= useUserStore()

二、Pinia持久化处理

1、安装pinia-plugin-persistedstate插件

npm i pinia-plugin-persistedstate

2、store下的index.ts修改，代码如下：

// 持久化处理
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
// 创建pinia状态管理对象
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)
export default pinia

3、store新建piniaPersist.ts文件，代码如下：

`默认情况下，会以 storeId 作为 key 值，把 state 中的所有状态存储在 sessionStorage 中。我们也可以通过 strategies 进行修改。

import { PersistedStateOptions } from 'pinia-plugin-persistedstate'
/**
 * @description pinia持久化参数配置
 * @param {String} key 存储到持久化的 name
 * @return persist
 * */
const piniaPersistConfig = (key: string) => {
	const persist: PersistedStateOptions = {
		key,
		storage: window.localStorage
	}
	return persist
}
export default piniaPersistConfig

4、单个store新增如下代码（例：user.ts）

import piniaPersistConfig from '../piniaPersist'
persist: piniaPersistConfig('user')

三、目前的目录结构如下：

参考文档：Pinia 中文文档

组件地址

gitHub组件地址

gitee码云组件地址

相关文章

基于ElementUi再次封装基础组件文档

---

vue3+ts基于Element-plus再次封装基础组件文档