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

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引入

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.定义用户信息的持久化状态

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 = valuserInfo.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.效果展示

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

关键代码

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模板,虽然模板需要自己改善的地方还有很多,但已经提供了足够的便利了。
另外,自己也是刚学习移动端,有诸多需要加强的地方,如有遗漏,不吝赐教。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/44423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

简述设计模式-策略模式

概述 在策略模式中一个类的行为或者算法可以在运行时更改&#xff0c;这种类型的设计模式属于行为型模式。 在策略模式中定义了一系列的算法和策略&#xff0c;并将每个算法封装在独立的类中&#xff0c;使得他们能够互相替换&#xff0c;通过使用策略模式可以在运行时选择不…

java 实现Comparable接口和实现Comparator接口排序的区别

Comparable接口 作用&#xff1a; Comparable接口是在类的内部实现的&#xff0c;用于指定类的默认比较规则。当一个类实现了Comparable接口时&#xff0c;它必须实现compareTo方法&#xff0c;该方法用于定义对象之间的自然顺序。 实现方式&#xff1a; 实现Comparable接口的…

洛谷P10716【MX-X1-T4】「KDOI-05」简单的字符串问题(扩展kmp+set+二分+扫描线树状数组)

题目 思路来源 小羊肖恩 题解 羊神这个做法tql&#xff0c;当时只是机械地写&#xff0c;过了之后再想想&#xff0c;才觉得确实是nb 先扩展kmp&#xff08;Z函数&#xff09;预处理出来数组&#xff0c;记z[i]为i往后可以和前缀匹配的最大长度 对于每个询问(p,cnt)&#x…

隧道转发:保护你的数据传输安全

你曾经是否担心过你的数据安全&#xff1f;现代网络威胁不断增加&#xff0c;保护数据传输的安全性变得愈发重要。今天为大家介绍一种强大的网络传输技术——隧道转发&#xff08;Tunneling&#xff09;。这项技术不仅能有效保障数据安全&#xff0c;还能保护用户隐私&#xff…

centOS79中安装nginx12.15

##red## &#x1f534; 大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff0c;雄雄的小课堂。 前言 装了这么多&#xff0c;发现Nginx是最简单的&#xff0c;一次性就搞定了。下面我们来看看如何安装 安装Nginx 安装gcc-c编译器 分开运行&#xff1a; yum…

anaconda安装pytorch

&#x1f4da;博客主页&#xff1a;knighthood2001 ✨公众号&#xff1a;认知up吧 &#xff08;目前正在带领大家一起提升认知&#xff0c;感兴趣可以来围观一下&#xff09; &#x1f383;知识星球&#xff1a;【认知up吧|成长|副业】介绍 ❤️如遇文章付费&#xff0c;可先看…

python爬虫入门(三)之HTML网页结构

一、什么是HTML 1、网页的三大技术要素&#xff1a; HTML定义网页的结构和信息&#xff08;骨架血肉&#xff09;CSS定义网页的样式&#xff08;衣服&#xff09;JavaScript定义用户和网页的交互逻辑&#xff08;动作&#xff09; 2、一个最简单的HTML&#xff1a;用<>…

Qt开发 | qss介绍及控件应用 | qss加载方式 | 控件提升 | 鼠标位置与控件位置 | 搜索编辑框 | tab在左文本水平的tabWidget

文章目录 一、qss简介与应用二、QLineEdit qss介绍与使用三、QPushButton qss1.常用qss1.1 基本样式表1.2 背景图片1.3 图片在左文字在右 2.点击按钮弹出菜单以及右侧箭头样式设置3.鼠标悬浮按钮弹出对话框 四、QCheckBox qss妙用&#xff1a;实时打开关闭状态按钮五、QComboBo…

丑数问题,力扣264,坑点

丑数问题&#xff0c;力扣264&#xff0c;坑点 力扣链接 给你一个整数 n &#xff0c;请你找出并返回第 n 个 丑数 。 丑数 就是质因子只包含 2、3 和 5 的正整数。 示例 1&#xff1a; 输入&#xff1a;n 10 输出&#xff1a;12 解释&#xff1a;[1, 2, 3, 4, 5, 6, 8, 9, …

Shell选择结构

文章目录 一、条件判断二、实例 一、条件判断 格式1&#xff1a;test 条件表达式 格式2&#xff1a;[条件表达式] 格式3&#xff1a;[[条件表达式]] -e 是否存在&#xff0c;不管是文件还是目录&#xff0c;只要存在&#xff0c;条件就成立。 -f 是否为普通文件 -d 是否为目录…

《昇思25天学习打卡营第01天|qingyun201003》

打卡 日期 心得 我的主语言并不是Python,以及现在从事的工作也并不是开发&#xff1b;所以对于这个系列的课程&#xff0c;学习起来是较为困难的&#xff0c;所以基于这种情况&#xff0c;该如何进行学习&#xff1f;我的做法是全部交给AI&#xff0c;使用AI一步步解析代码&a…

java.lang.NullPointerException: null cannot be cast to non-null type kotlin.Int

java.lang.NullPointerException: null cannot be cast to non-null type kotlin.Int fun main(args: Array<String>) {var any1: Any?any1 nullval n1 any1 as? Int ?: -2024println(n1)kotlin.runCatching {var any2: Any?any2 nullval n2 any2 as Intprintln(…

python xlsx 导出表格超链接

该Python脚本用于从Excel文件中的第一列提取所有超链接并保存到一个文本文件中。首先&#xff0c;脚本导入必要的库并定义输入和输出文件的路径。然后&#xff0c;它确保输出文件的目录存在。接着&#xff0c;脚本加载Excel文件并选择活动工作表。通过遍历第一列的所有单元格&a…

Internet Download Manager6.42最新下载器互联网冲浪小能手们!

今天我要来种草一个超级棒的宝贝——Internet Download Manager&#xff08;简称 IDM&#xff09;。这个小家伙简直是下载界的“速度与激情”代言人&#xff0c;让我彻底告别了等待的日子。&#x1f389; IDM马丁正版下载如下: https://wm.makeding.com/iclk/?zoneid34275 …

【创作纪念日】我的三周年创作纪念日

光阴荏苒&#xff0c;从我开始在CSDN写作已经整整3年(2024.7.10)&#xff0c;3年前的今天2021.7.10开始记录第一篇文章&#xff0c;到今天的305篇文章&#xff01;没想到&#xff01;积累的力量&#xff01;继续努力&#xff01; 机缘 1、创作初心&#xff0c;对自己工作的经…

299k stars利用Public APIs提升开发效率:探索APILayer提供的开源资源

299k stars利用Public APIs提升开发效率&#xff1a;探索APILayer提供的开源资源 在现代软件开发中&#xff0c;API&#xff08;应用程序接口&#xff09;是实现应用间通信和功能扩展的关键工具。公共API&#xff08;Public APIs&#xff09;则为开发者提供了宝贵的资源&#…

路由器中 RIB 与 FIB 的区别

注&#xff1a; 本文原是前面发的一篇文章的中间注释&#xff0c;但注释跨行太多&#xff0c;影响原文连贯阅读。 RIB&#xff08;Routing Information Base&#xff0c;路由表&#xff09; RIB 存储所有的路由信息&#xff0c;与具体的路由协议无关。所有的路由协议都在这里…

昇思25天学习打卡营第15天|基于 MindSpore 实现 BERT 对话情绪识别

文章目录 昇思MindSpore应用实践1、基于 MindSpore 实现 BERT 对话情绪识别BERT 模型简介数据集数据加载和数据预处理 2、模型训练模型验证 3、模型推理 Reference 昇思MindSpore应用实践 本系列文章主要用于记录昇思25天学习打卡营的学习心得。 1、基于 MindSpore 实现 BERT…

ArduPilot开源代码之AP_OpticalFlow_CXOF

ArduPilot开源代码之AP_OpticalFlow_CXOF 1. 源由2. Library设计3. 重要例程3.1 AP_OpticalFlow_CXOF::init3.2 AP_OpticalFlow_CXOF::update3.3 AP_OpticalFlow_CXOF::detect 4. 总结5. 参考资料 1. 源由 AP_OpticalFlow_CXOF是就是一个光流计&#xff0c;与前面传感模块&…

【网络】为什么SCTP四次握手可以抵御SYN攻击

深入理解SCTP的安全性&#xff1a;从四次握手到抵御SYN攻击 引言 在网络通信的世界中&#xff0c;安全性和可靠性是至关重要的。传统的TCP&#xff08;传输控制协议&#xff09;在建立连接时使用三次握手&#xff0c;但这种机制存在一些安全漏洞&#xff0c;比如SYN攻击。而S…