uni-app三部曲之一: Pinia使用

1.引言

最近在学习移动端的开发,使用uni-app前端应用框架,通过学习B站的视频以及找了一个开发模板,终于是有了一些心得体会。

B站视频1:Day1-01-uni-app小兔鲜儿导学视频_哔哩哔哩_bilibili

B站视频2:01-课程和uni的基本介绍_哔哩哔哩_bilibili

开发模板:简介 | unibest

2.代码

代码主要分为三个部分,第一是初始化Pinia,第二是在main.ts中引入,第三是定义全局状态。

1.初始化Pinia

TypeScript 复制代码
import { createPinia } from 'pinia'
import { createPersistedState } from 'pinia-plugin-persistedstate' // 数据持久化

const store = createPinia()
store.use(
  createPersistedState({
    storage: {
      getItem: uni.getStorageSync,
      setItem: uni.setStorageSync,
    },
  }),
)

export default store

// 模块统一导出 这个是定义的用户信息持久化的文件路径
export * from './modules/user'

2.main.ts引入

TypeScript 复制代码
import { createSSRApp } from 'vue'
import App from './App.vue'
import store from './store'


export function createApp() {
  const app = createSSRApp(App)
  app.use(store)
  return {
    app,
  }
}

3.定义用户信息的持久化状态

TypeScript 复制代码
import { defineStore } from 'pinia'

// 默认信息

const initUserInfo: IUserInfo = {
  permissions: [],
  roles: [],
  isLogin: false,
  user: {
    id: 0,
    avatar: '',
    username: '',
    nickname: '',
    code: '',
  },
  dept: {
    id: 0,
    name: '',
    deptId: '',
  },
}

export const useUserStore = defineStore(
  'user',
  () => {
    // 默认的用户信息
    const userInfo = ref<IUserInfo>(initUserInfo)

    // 存储用户信息
    const setUserInfo = (val: IUserInfo): void => {
      userInfo.value = val
      userInfo.value.isLogin = true
    }

    // 清除用户信息
    const clearUserInfo = (): void => {
      userInfo.value = initUserInfo
    }

    // 千万不要忘记返回
    return {
      userInfo,
      setUserInfo,
      clearUserInfo,
    }
  },
  {
    // 网页端配置
    // persist: true,
    // 小程序端配置
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },
  },
)

3.效果展示

在登录界面,使用用户名密码登录后,调用获取用户信息的接口进行存储并持久化。

关键代码

TypeScript 复制代码
import { useUserStore } from '@/store'
// 人员信息
const userStore = useUserStore()

// 登录系统 一进系统就需要登录
const handleLogin = async () => {
  const loginRes = await loginApi.login(loginForm)
  const userInfoRes = permissionApi.getUserPermissionInfo()
  userStore.setUserInfo((await userInfoRes).data)
  uni.switchTab({ url: '/pages/index/index' })
}

登录之前

登录后

4.写在最后

本文内容不复杂,个人理解代码也比较简单,主要是把整体的框架搭起来后,添加对应的状态管理,拦截器等就简单很多。

感谢unibest模板,虽然模板需要自己改善的地方还有很多,但已经提供了足够的便利了。

另外,自己也是刚学习移动端,有诸多需要加强的地方,如有遗漏,不吝赐教。

相关推荐
耶啵奶膘43 分钟前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
中云DDoS CC防护蔡蔡3 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼7 小时前
微信小程序-prettier 格式化
微信小程序·小程序
我开心就好o8 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index8 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
qq_17448285759 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502779 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
初遇你时动了情15 小时前
uniapp 城市选择插件
开发语言·javascript·uni-app
licy__15 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
小小黑00718 小时前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue