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模板,虽然模板需要自己改善的地方还有很多,但已经提供了足够的便利了。

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

相关推荐
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac7 小时前
微信小程序的组件
微信小程序
stormjun8 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
尚学教辅学习资料11 小时前
基于SSM+uniapp的营养食谱系统+LW参考示例
java·uni-app·ssm·菜谱
Bessie23411 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong11 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
17 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
qq229511650219 小时前
小程序Android系统 校园二手物品交换平台APP
微信小程序·uni-app
一只不会编程的猫1 天前
微信小程序配置
微信小程序·小程序
程序员入门进阶1 天前
基于微信小程序的移动学习平台的设计与实现+ssm(lw+演示+源码+运行)
学习·微信小程序·小程序