Vue3 使用存储库Pinia(getters)

news2024/12/23 14:07:42

一、store.js创建getters

import { defineStore } from "pinia";
export const useStore = defineStore('main', {
    state() { // state表示这个store里的状态,也就是存放数据的地方
        return {
            name: '张三',
            age:'26' 
        }
    },
    actions: {  // 和vue中的methods一样
        updateAge(data) {
          this.age = data // 可以使用this访问和修改state中的数据
        },
    },
    getters:{
        editName(data){ //姓名加密
            return data.name.slice(0, data.name.length - 1) + '**'
        },
    }
})

二、引用store.js

import {useStore} from "../store/store" // 引入store
const store = useStore()

三、html里展示

{{store.editName}}{{store.age}}

四、效果

在这里插入图片描述

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

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

相关文章

前端必会的三种DIV+CSS布局

要开发网页,必须要搞懂这三种divcss布局技术!(1)左右两列布局;(2)1行3列;(3)1行多列或多行多列布局;只要你掌握了这三种布局方式,那搭…

2核4G服务器腾讯云或阿里云能安装几个网站?性能如何?

2核4G服务器能安装多少个网站?2核4g配置能承载多少个网站?一台2核4G服务器可以安装多少个网站?阿腾云2核4G5M带宽服务器目前安装了14个网站,从技术角度是没有限制的,只要云服务器性能够用,想安装几个网站就…

java之maven专题

1、idea配置maven https://blog.csdn.net/hanmingjun/article/details/129977880 2、阿里云补充缺少的jar包 到官方下载好jar包到这里上传 maven中配置跳过单元测试 https://maven.apache.org/surefire/maven-surefire-plugin/examples/skipping-tests.html

记录--再也不用手动改package.json的版本号

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本文的起因是有在代码仓库发包后,同事问我“为什么package.json 里的版本还是原来的,有没有更新?”,这个时候我意识到,我们完全没有必要在每…

lwip-2.1.3自带的httpd网页服务器使用教程(二)使用SSI动态生成网页部分内容

上一篇:lwip-2.1.3自带的httpd网页服务器使用教程(一)从SD卡读取网页文件并显示 通过全局数组定义TAG标签列表 (本节例程名称:ssi_test) 电脑上用的Web服务器采用ASP、PHP或JSP动态网页技术后&#xff0c…

Verdi之状态机状态查询nState

目录 5. nState 5.1如何打开状态机视图 5.2 如何在状态机视图中添加状态转移条件 5.3 如何查看状态机个状态对应的相关代码 5.4 查看具体的状态机状态转移时间点 5.5 查找自定义状态 5.6 查找某个状态执行的次数 5. nState 5.1如何打开状态机视图 1. 将设计文件导入Ver…

人脸识别学习

1、人脸识别如何做到一次学习 (1)、数据收集:收集包含多个人脸图像的数据集,每个人脸图像都有对应的标签或身份信息。 (2)、图像预处理:对数据集中的每个人脸图像进行预处理,包括图…

pytorch的配置从此不在愁

anaconda配置 原视频的配置网站:Anaconda pytorch: 【从入门到进阶】PyTorch深度学习框架完结合集!草履虫都能学会的计算机视觉实战(PyTorch安装/深度学习实战/神经网络/人工智能)_哔哩哔哩_bilibili 上面的视频 …

开放麒麟操作系统能打动嵌入式软件工程师吗?

国产操作系统大部分客户其实是toB的,内核以外的源码也是不开源的,比如麒麟系、统信UOS等,个人学习、小企业基本不会用。7月5日开放麒麟操作系统v1.0版正式发布,不同点是这个操作系统从内核到桌面系统源代码都是开源的,…

SpringCloud Alibaba——Nacos1.x配置中心长轮询机制

目录 一、Nacos1.x配置中心长轮询机制二、Nacos1.x配置中心长轮询机制流程图解 一、Nacos1.x配置中心长轮询机制 客户端会轮询向服务端发出一个长连接请求,这个长连接最多30s就会超时,服务端收到客户端的请求会先判断当前是否有配置更新,有则…

网络协议 — LLDP 数据链路发现协议

目录 文章目录 目录LLDPLLDPDUEthernet II LLDPDUSNAP LLDPDULLDPDU TLVs基本 TLV802.1 定义的 TLV802.3 定义的 TLV802.3 定义的 LLDP-MED TLV LLDP 消息流程LLDP 协议栈 LLDP LLDP(Link Layer Discovery Protocol,链路层发现协议)是定义在…

Windows环境下安装Nacos

文章目录 一、什么是Nacos1. 主要特点:1.1 服务发现和注册:1.2 配置管理:1.3 服务管理:1.4 多语言支持:1.5 高可用性和扩展性: 二、Windows下安装单机版Nacos1. 安装包下载:2. 目录文件说明&…

基于torchvision的CV迁移学习

前面我们用过了cifar10,这里因为我们模型的体量更大,他能够理解更加复杂的数据集,所以这里我们就使用更加复杂的数据集叫做cifar100,顾名思义就是它是一个100分类的图像数据集,分类数据更多,复杂度更多。 …

哈希表(hashtable)的数据插入、查找和遍历

文章目录 前言一、哈希二、哈希的具体实现2.1 准备工作2.2 插入数据2.3 输出哈希表2.4 在哈希表中寻找数据2.5 销毁哈希表 三、 哈希表的调用总结 前言 本期主要和大家介绍一下哈希算法,这里主要给出哈希算法的实现方法; 一、哈希 hash是一种算法: 哈希…

Linux进程理解【环境变量】

Linux进程理解【环境变量】 提到环境变量,大家可能有些陌生,如果编写过Java就知道,编写Java需要提前安装JDK,这个操作就是配置Java的编码环境,在Linux中当然也少不了环境变量,下面我们就一起来看看 文章目…

SpringBoot 统一功能的处理

SpringBoot 统一功能的处理 文章目录 SpringBoot 统一功能的处理1. 用户登录权限校验1.1 最初用户登录验证1.2 Spring AOP 统一用户登录验证的问题1.3 SpringAOP 拦截器1.3.1 实现自定义拦截器1.3.2 将自定义拦截器加入到系统配置 1.4 拦截器实现原理1.4.1 实现流程图1.4.2 实现…

LeetCode:3. 无重复字符的最长子串

🍎道阻且长,行则将至。🍓 🌻算法,不如说它是一种思考方式🍀 算法专栏: 👉🏻123 题解目录 一、🌱[3. 无重复字符的最长子串](https://leetcode.cn/problems/l…

分享维修一例DELL R540服务器黄灯无法开机故障

DELL PowerEdge R540服务器故障维修案例:(看到文章就是缘分) 客户名称:东莞市某街道管理中心 故障机型:DELL R540服务器 故障问题:DELL R540服务器无法开机,前面板亮黄灯,工程师通过…

私有GitLab仓库 - 本地搭建GitLab私有代码仓库并随时远程访问

文章目录 前言1. 下载Gitlab2. 安装Gitlab3. 启动Gitlab4. 安装cpolar内网穿透5. 创建隧道配置访问地址6. 固定GitLab访问地址6.1 保留二级子域名6.2 配置二级子域名 7. 测试访问二级子域名 前言 GitLab 是一个用于仓库管理系统的开源项目,使用Git作为代码管理工具…

javaee jstl表达式

jstl是el表达式的扩展 使用jstl需要添加jar包 package com.test.servlet;import java.io.IOException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map;import javax.servlet.ServletException; import javax.servlet…