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

news2024/11/19 13:27:59

存token 

import { defineStore } from 'pinia';

export const userInfo = defineStore('userInfo', {
  state: () => {
    return {
      userToken: uni.getStorageSync('token') || '',
    };
  },
  actions: {
    // 添加token
    updateToken(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'

 const info = useMemberStore()
 
 const { userInfo } = storeToRefs(info)
 
 console.log(userInfo.value.member_id, '从缓存中取数据');

打印下 userInfo 

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

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

相关文章

移动端1px-从基本原理到开源解决方案介绍

1px 不够准确,应该说成 1 物理像素 为什么有 1px 这个问题?实现 1px 有哪些方法?这些方法分别有哪些优缺点?开源项目中使用的哪些解决方案?如何在项目中处理 1px 的相关问题? 基本概念 首先,我们…

【vue3】异步组件-骨架屏

使用异步组件&#xff0c;在打包的时候&#xff0c;会把异步组件额外打包&#xff0c;在使用的时候才加载。解决项目文件过大&#xff0c;加载白屏的时间过长&#xff0c;造成不好的用户体验。起到性能优化的作用。 一、父级使用&#xff1a; <template><div><S…

前端开发各种loading效果【loading图的顺序对应代码顺序】

效果图 HTML <h1>Pure <b>SVG</b> Loader</h1><!-- Loader1 --><svg version"1.1" id"L1" xmlns"http://www.w3.org/2000/svg" xmlns:xlink"http://www.w3.org/1999/xlink" x"0px" y&quo…

canvas绘制扫描图

先定义一个canvas <div class"canFa"><canvas width"380" id"can3"></canvas></div>主要绘制函数 var chosHeight document.getElementsByClassName("canFa")[0].children[0].clientHeight;var chosWidth …

springBoot--web--静态资源规则

规则一&#xff1a; 访问&#xff1a;/webjars/** 路径就去 classpath:/META-INF/resources/webjars/下载资源 a.maven导入依赖 规则二&#xff1a; 访问&#xff1a;/** 路径就去 静态资源默认的四个位置找资源 a. classpath:/META-INF/resources/ b.classpath:/resourc…

mac虚拟机安装配置qt遇到的坑

本人的环境大致如下&#xff1a; VMware Workstation 16pro Mac镜像 macOS.Mojave10.14.6 &#xff08;后面在系统中升级到了 Sonoma 14.0&#xff09; Qt5.9.6 Xcode15.0 问题1&#xff1a; 环境都安装好后&#xff0c;qt创建工程一直只有.pro文件&#xff0c;看不到头文件和c…

互联网洗鞋店为什么如此火爆

互联网洗鞋店管理系统&#xff0c;干洗店洗衣洗鞋小程序&#xff0c;专门为干洗店、洗鞋店打造的高效、实用、有价值的洗鞋私域流量管理软件系统。 帮助洗鞋人打造自己的私域流量&#xff0c;实现会员用户管理&#xff0c;用户与商家点对点互联互通&#xff0c;提高洗鞋人经营管…

如何在ENVI中导入和定位SMAP的L3级土壤水分数据

如何在ENVI中导入和定位SMAP的L3级土壤水分数据 一、数据获取 二、ENVI中打开SMAP 三、建立地理查找表 然后打开GLT工具 修改输入输出的投影方式 设置输出路径&#xff0c;OK 四、配准

计算机中丢失VCRUNTIME140_1,总结vcruntime140_1.dll的五种修复方法

在使用计算机的过程中&#xff0c;我们可能会遇到各种各样的问题。其中&#xff0c;VCRuntime140_1.dll丢失是一个常见的问题。这个DLL文件是Microsoft Visual C 2015 Redistributable的一部分&#xff0c;它提供了许多重要的功能&#xff0c;包括一些运行时间库。当此DLL文件丢…

前端用F11打开伪装更新页面demo后,老板被欺骗多次!

前言 无意间看见朋友分享的页面看到了一个有趣的页面&#xff0c;通过F11之后给人以假乱真的感觉&#xff0c;这个代码并不难&#xff0c;我们一起来看看&#xff01; 正文 通过引入jQuery快速实现 一、js逻辑代码 function changeFullScreen() {const element document.doc…

优雅而高效的JavaScript——try...catch语句(js异常处理)

&#x1f601;博主&#xff1a;小猫娃来啦 &#x1f601;文章核心&#xff1a;优雅而高效的JavaScript——try…catch语句 文章核心 异常处理的重要性try...catch语句的基本语法和用法异常类型的分类和捕获内置异常类型自定义异常类型 try...catch的嵌套和多个块的应用finally子…

华为智选SF5,AITO问界的车怎么样

#华为智选 #赛力斯SF5 #aito问界m5 #aito问界m7 #华为汽车 华为的车&#xff0c;后杠焊两点&#xff0c;拉车的时候&#xff0c;拖车钩断了&#xff0c;后杠拉出来了&#xff0c;这质量可以吗&#xff1f;是否应该全部召回&#xff1f;M5&#xff0c;M7是不是也这样&#xff1f…

JAVA抽象概念大揭秘:用生动有趣的方式,带你领略编程的无限可能

抽象的概念 抽象类和抽象方法是面向对象编程中的重要概念&#xff0c;用于实现抽象和继承的特性。抽象类是不能被实例化的类&#xff0c;通常用作其他类的基类。抽象方法是在抽象类中声明但没有具体实现的方法&#xff0c;需要在子类中实现具体的功能。 抽象类的用途 假设我…

数据通信——应用层(Telnet与WWW)

一&#xff0c;引言 我们使用交换机和路由器以及其它网络设备时&#xff0c;需要进行一些配置&#xff0c;因此需要登录的设备内部进行操作。登录到设备内部的方法有很多&#xff0c;比如通过console口或者其他串口与对端设备相连&#xff0c;也可以通过wifi无线连接&#xff0…

NET MVC中如何使用Element-Plus

目的 在Net Mvc5或者Net Core Mvc中&#xff0c;我们如何通过cdn的放引入Element-Plus并&#xff0c;使用Element-Plus相关的组件&#xff0c;包含Vue-Icon和多语言的使用。 准备工作 1.这里为了方便&#xff0c;我们直接使用html文件来代替Mvc项目。新建一个index.html文件…

硬件知识:DDR3、DDR4和DDR5内存条有啥区别,看完你就懂

目录 一、DDR3内存 二、DDR4内存 三、DDR5内存 DDR3、DDR4和DDR5是计算机内存类型的名称&#xff0c;代表第三代、第四代和第五代双倍数据速率&#xff08;Double Data Rate&#xff0c;简称DDR&#xff09;同步动态随机存取存储器&#xff08;SDRAM&#xff09;。 不同内存…

小程序开发平台源码系统 +功能丰富 +有完整搭建教程

大家好啊&#xff0c;今天要给大家分享的这款系统可就厉害了。全新升级的小程序开发平台源码系统&#xff0c;其中包含了15项不同小程序功能&#xff0c;各行各业都有。一起来看看吧。以下是部分功能实现代码&#xff1a; 系统特色功能一览&#xff1a; 一、微同城本地生活服务…

项目管理中,进度管理是决定成败的关键因素!(建议收藏)

项目管理的主要目标在于确保员工充分理解其责任的目的和关键性&#xff0c;从而使其工作更具焦点和步骤性&#xff0c;以实现一目了然的效果。以小王在十字路口为例&#xff0c;项目经理就如同他的指路人&#xff0c;使其明确自己的方向&#xff0c;避免走错路。 在项目中&…

华测监测预警系统 2.2---任意文件读取漏洞

目录 1. 资产搜集 2. 漏洞复现 3. 实战总结 1. 资产搜集 直接上fofa 和 hunter 个人推荐hunter可以看到icp备案公司直接提交盒子就行了 FOFA语法 app”华测监测预警系统2.2” Hunter语法 web.body”华测监测预警系统2.2” 2. 漏洞复现 这里手动复现的&#xff0c;目录是/…

Kylin麒麟系统下安装人大金仓

虚拟机在线安装 install open-vm-tools-desktop -y 简要介绍 人大金仓数据库管理系统KingbaseES&#xff08;简称&#xff1a;金仓数据库或KingbaseES&#xff09;是北京人大金仓信息技术股份有限公司自主研制开发的具有自主知识产权的通用关系型数据库管理系统。金仓数据库主…