uniapp vue3 使用pinia存储 并获取数据

存token 

import { defineStore } from 'pinia';export const userInfo = defineStore('userInfo', {state: () => {return {userToken: uni.getStorageSync('token') || '',};},actions: {// 添加tokenupdateToken(token: string) {uni.setStorageSync('token', token);this.userToken = token}}
});

使用

 import {userInfo} from '@/stores/userInfo'import {ref} from "vue";const test = userInfo()const tst = ref('4')test.updateToken(tst.value)

效果

这边存 用户信息

定义store 文件

import { defineStore } from 'pinia'interface Member {userInfo : AnyObject | null
}const useMemberStore = defineStore('member', {state: () : Member => {return {userInfo: uni.getStorageSync('userInfo') || null}},actions: {updateUserInfo(userInfo : AnyObject) {uni.setStorageSync('userInfo', userInfo)this.userInfo = userInfo}}
})export default useMemberStore

 vue页面 存储数据

import useMemberStore from '@/stores/member'const user = useMemberStore()user.updateUserInfo('存对象的数据')   

取数据

在template中 使用 userInfo.member_id

 import { storeToRefs } from 'pinia'import useMemberStore from '@/stores/member'    const info = useMemberStore()const { userInfo } = storeToRefs(info)console.log(userInfo.value.member_id, '从缓存中取数据');

打印下 userInfo 

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

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

相关文章

蓝牙音视频远程控制协议(AVRCP)介绍

零.声明 本专栏文章我们会以连载的方式持续更新,本专栏计划更新内容如下: 第一篇:蓝牙综合介绍 ,主要介绍蓝牙的一些概念,产生背景,发展轨迹,市面蓝牙介绍,以及蓝牙开发板介绍。 第二篇:Trans…

【六:pytest框架介绍】

常见的请求对象requests.get()requests.post()requests.delete()requests.put()requests.request()常见的响应对象reprequests.request()//返回字符串格式数据print(req.text)//返回字节格式数据print(req.content)//返回字典格式数据print(req.json)#状态码print(req.status_c…

Character Animator 2024(Ch2024):打造生动角色,让动画设计更上一层楼

Character Animator 2024是一款专为角色动画设计师打造的软件,它可以帮助设计师快速创建出丰富多彩的角色动画。无论是初学者还是专业设计师,都可以通过Character Animator 2024轻松实现自己的创意。 Ch2024独特优势: 实时角色动画&#xf…

计算机网络 | 应用层

计算机网络 | 应用层 计算机网络 | 应用层应用层概述网络应用模型客户/服务器模型(Client/Server,C/S)P2P模型(Peer-to-Peer) 域名系统(DNS)层次域名空间域名服务器域名解析过程 文件传输协议&a…

DevExpress WPF Pivot Grid组件,可轻松实现多维数据分析!(二)

在上文中(点击这里回顾>>)我们主要为大家介绍了DevExpress WPF Pivot Grid组件的超快速枢轴分析功能、Microsoft分析服务等,本文将继续介绍图表透视数据的处理、MVVM支持等。欢迎持续关注我们,探索更多新功能哦~ P.S&#…

【工具】利用ffmpeg将网页中的.m3u8视频文件转化为.mp4格式

目录 0.环境 1.背景 2.前提 3.详细描述 1)在网站上找到你想下载的视频的.m3u8链接 2)打开命令行,用ffmpeg命令进行转化 3)过程&结果截图 0.环境 windows64 ffmpeg 1.背景 网页上有个.m3u8格式的视频文件,…

2023高频前端面试题(含答案)

一、简单页面1、CSS选择器样式优先级2、CSS实现三列布局(左右固定宽度,中间自适应) (1)CSS浮动 第一个float:left,第二个float:right,第三个设置margin-left和margin-right (2&#…

LC-2316. 统计无向图中无法互相到达点对数(DFS、并查集)

2316. 统计无向图中无法互相到达点对数 中等 给你一个整数 n ,表示一张 无向图 中有 n 个节点,编号为 0 到 n - 1 。同时给你一个二维整数数组 edges ,其中 edges[i] [ai, bi] 表示节点 ai 和 bi 之间有一条 无向 边。 请你返回 无法互相…

pandas写入MySQL

安装好pandas、mysql pip install pandas pip install pymysql 导入pandas、mysql import pymysql as mysql import pandas as pd 建立连接 conmysql.connect(host10.10.0.221,userroot,passwordroot,databasepandas,port3306,charsetutf8) 创建游标 curcon.cursor() 读…

vite+vue3.0 使用tailwindcss

参考资料: 安装 - TailwindCSS中文文档 | TailwindCSS中文网 npm install -D tailwindcss npm install postcss npm install autoprefixer npx tailwindcss init -p 生成/src/tailwind.config.js和/src/postcss.config.js配置文件 在/src/tailwind.config.js配置文件…

《动手学深度学习 Pytorch版》 9.6 编码器-解码器架构

为了处理这种长度可变的输入和输出, 可以设计一个包含两个主要组件的编码器-解码器(encoder-decoder)架构: 编码器(encoder):它接受一个长度可变的序列作为输入,并将其转换为具有固定…

httpd服务

文章目录 httpd服务1.安装httpd服务2.开启服务,设置服务开机自启立马生效,并查看服务状态3.查看监听端口4.关闭防火墙,设置防火墙开机不自启立马生效;关闭selinux5.写一个index.html文件,在真机浏览器访问测试效果6.查…

vue3插件开发,上传npm

创建插件 在vue3工程下,创建组件vue页: toolset.vue。并设置组件名称。注册全局组件。新建index.js文件。内容如下,可在main.js中引入index.js,注册该组件进行测试。![在这里插入图片描述](https://img-blog.csdnimg.cn/a3409d2cbeec41c797d5…

linux性能分析(四)CPU篇(一)基础

一 CPU篇 遗留: 负载与cpu关系、负载与线程的关系? ① CPU 相关概念 1、physical 物理CPU个数 --> 一般一个实体 2、cpu 核数 3、逻辑CPU个数 逻辑核 4、超线程 super thread 技术 5、各种cpu的计算方式物理 physical CPU的个数: physical id逻…

【数据结构】队列(C语言实现)

📙 作者简介 :RO-BERRY 📗 学习方向:致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 📒 日后方向 : 偏向于CPP开发以及大数据方向,欢迎各位关注,谢谢各位的支持 队列 1. 队列的概念及结构…

基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码

基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码 文章目录 基于侏儒猫鼬优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.侏儒猫鼬优化BP神经网络3.1 BP神经网络参数设置3.2 侏儒猫鼬算法应用 4.测试结果…

嵌入式养成计划-42----QT 创建项目--窗口界面--常用类及组件

一百零五、如何创建 QT 项目 创建工程 New Project / 文件–>新建。。 /ctrl N 选择一个模板–>Application -->Qt Widgets Application 选择创建的路径,以及设置文件名 下一步 输入类名,选择基类为 QWidget 下一步 选择这个玩意&a…

2020年亚太杯APMCM数学建模大赛A题激光标记舱口轮廓生成求解全过程文档及程序

2020年亚太杯APMCM数学建模大赛 A题 激光标记舱口轮廓生成 原题再现: 激光是20中的一项重要发明世纪,它被称为“最锋利的刀”、“最精确的尺子”和“最不寻常的光”。 激光已越来越多地应用于工业加工, 其中可以是就业在各种加工业务例如作…

凉鞋的 Godot 笔记 203. 变量的常用类型

203. 变量的常用类型 在上一篇,我们对变量进行了概述和简介,知识地图如下: 我们已经接触了,变量的字符串类型,以及一些功能。 在这一篇,我们尝试多接触一些变量的类型。 首先是整数类型。 整数类型 整…

Vue解决 npm -v 报错(一)

报错内容: npm WARN config global --global, --local are deprecated. Use --locationglobal instead. 解决方案: 代码: prefix -g 替换为: prefix --locationglobal 原创作者:吴小糖 创作时间:2023.1…