vue3pinia

pinia

  • 一.pinia的理解及其搭配pinia环境
  • 二.使用
  • 二.修改数据(三种方式)
  • 三.storeToRefs

目录是store
Store 包含了状态(state)、获取器(getters)和操作(actions),相当于组件中的: data、 computed 和 methods。
Store是一个保存:状态、业务逻辑 的实体,每个组件都可以读取、写入它。

一.pinia的理解及其搭配pinia环境

理解:
pinia:符合直觉的vue.js状态管理库/集中式状态(数据)管理
组件之间需要共享的数据可以放在pinial里
搭配环境:
第一步:npm install pinia
第二步:操作src/main.ts

import { createApp } from 'vue'
import App from './App.vue'/* 引入createPinia,用于创建pinia */
import { createPinia } from 'pinia'/* 创建pinia */
const pinia = createPinia()
const app = createApp(App)/* 使用插件 */{}
app.use(pinia)
app.mount('#app')

二.使用

创建store
引入并使用defineStore()函数定义Store
store/count.ts
命名一般是usexxxStore

// 引入defineStore用于创建store
import {defineStore} from 'pinia'
// 定义并暴露一个store
export const useTalkStore = defineStore('talk',{// 动作actions:{},// 状态state(){return {talkList:[{id:'yuysada01',content:'你今天有点怪,哪里怪?怪好看的!'},{id:'yuysada02',content:'草莓、蓝莓、蔓越莓,你想我了没?'},{id:'yuysada03',content:'心里给你留了一块地,我的死心塌地'}]}},// 计算getters:{}
})

组件使用store

<template><ul><li v-for="talk in talkStore.talkList" :key="talk.id">{{ talk.content }}</li></ul>
</template><script setup lang="ts" name="Count">import axios from 'axios'import {useTalkStore} from '@/store/talk'const talkStore = useTalkStore()
</script>

二.修改数据(三种方式)

1.第一种修改方式,直接修改

countStore.sum = 666
2.第二种修改方式:批量修改

countStore.$patch({
sum:999,
school:‘atguigu’
})
3.第三种修改方式:借助action修改(action中可以编写一些业务逻辑)

import { defineStore } from 'pinia'export const useCountStore = defineStore('count', {/*************/actions: {//加increment(value:number) {if (this.sum < 10) {//操作countStore中的sumthis.sum += value}},//减decrement(value:number){if(this.sum > 1){this.sum -= value}}}
})

组件中调用action即可

// 使用countStore
const countStore = useCountStore()// 调用对应action
countStore.incrementOdd(n.value)

三.storeToRefs

作用:借助storeToRefs将store中的数据转为ref对象,方便在模板中使用。
注意:pinia提供的storeToRefs只会将数据做转换,而Vue的toRefs会转换store中数据。

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

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

相关文章

web后端--Spring事务管理

事务也要日志配置 !!!!debug前面记得加空格 logging:level:org.springframework.jdbc.support.JdbcTransactionManager: debugrollbackFor 默认情况下&#xff0c;只有出现RunTimeException才会回滚事务&#xff0c;rollbackfor属性用于控制出现何种异常类型&#xff0c;回滚…

Linux shell编程笔记0

一、shell概述 shell是一个命令行解释器&#xff0c;它接收应用程序/用户命令&#xff0c;然后调用操作系统内核。 shell还是一个功能强大的编程语言&#xff0c;易编写、易调试、灵活性强。 二、shell脚本入门 1.进入编辑模式进入到目录下 vi 文件名称如果是system下的文件…

解决MyBatis查询oracle的NCLOB类型都是内存地址字符串

在项目的配置类文件夹中放入如下通用类OracleResultSetInterceptor import org.apache.ibatis.executor.resultset.ResultSetHandler; import org.apache.ibatis.plugin.*;import java.io.IOException; import java.io.Reader; import java.io.StringWriter; import java.sql.…

电子水尺的工作原理

TH-SC24电子水尺&#xff0c;也被称为感应式防汛水尺或水位在线监测仪&#xff0c;是一种专门用于监测河流水域水位变化的高科技设备。它在防汛工作中发挥着至关重要的作用&#xff0c;能够实时、准确地提供水位数据&#xff0c;为防汛决策和应急响应提供有力支持。   工作原…

连续两年入选!得帆信息强势上榜2024 Gartner ICT技术成熟度曲线

近日&#xff0c;国际权威咨询机构Gartner发布了《Hype Cycle for ICT in China, 2024》&#xff08;2024年中国ICT技术成熟度曲线&#xff09;报告。得帆信息连续两年入选低代码应用平台&#xff08;LCAP&#xff09;标杆供应商&#xff08;Sample Vendor&#xff09;。 每年&…

初创小程序公司怎么选服务器合作商

初创小程序公司怎么选服务器合作商&#xff1f;在移动互联网的浪潮中&#xff0c;小程序以其轻量、便捷、即用即走的特点&#xff0c;成为了众多初创企业快速触达用户、展现创意与服务的理想平台。然而&#xff0c;对于初创小程序公司而言&#xff0c;如何在纷繁复杂的服务器市…

ABAP 无意义的FORM 规范

发现一个极为奇怪的现象&#xff0c;大多数ABAP程序员会在FORM名称前加前缀frm_。 请问这是规范吗&#xff0c;整齐好看吗&#xff0c;又好看在哪里呢。这是哪个师傅教的&#xff0c;意义是什么&#xff1f;而且大多数人就来个frm_get_data与frm_del_data&#xff0c;然后这两…

基于springboot+vue+uniapp的居民健康监测小程序

开发语言&#xff1a;Java框架&#xff1a;springbootuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#…

SQL入门通识:轻松掌握数据库查询语言

文章目录 什么是SQL&#xff1f;SQL的基本概念SQL的基本操作查询&#xff08;SELECT&#xff09;插入&#xff08;INSERT&#xff09;更新&#xff08;UPDATE&#xff09;删除&#xff08;DELETE&#xff09; 结合操作&#xff1a;联表查询和排序联表查询&#xff08;JOIN&…

(CVPR-2024)通过多阶段框架和定制的多解码器架构提高扩散模型的训练效率

通过多阶段框架和定制的多解码器架构提高扩散模型的训练效率 Paper Title:Improving Training Efficiency of Diffusion Models via Multi-Stage Framework and Tailored Multi-Decoder Architecture Paper是密歇根大学发表在CVPR 2024的工作 Paper地址 Code地址 Abstract 扩散…

通过哨兵1号SAR数据获取桂林619洪水内涝情况

目录 1.SAR数据下载 2.SAR数据处理 1、下载轨道数据并进行轨道校正。 2、数据处理 3、转换SAR单位并创建彩色合成影像 3.查看彩色合成SAR数据 4.水体提取方法探讨 方法1&#xff1a;阈值提取法 方法2&#xff1a;深度学习提取水域 5.SAR与DEM数据获取 2024年6月19日&a…

MobaXterm 软件安装及使用

MobaXterm 软件安装及使用 1. 引言 MobaXterm是一款功能强大的终端软件&#xff0c;支持SSH、Telnet、RDP、VNC、FTP、SFTP、X11转发和串口等远程会话功能。它使得在Windows系统上进行Linux系统的远程管理和文件传输变得简单便捷。 2. MobaXterm 软件下载 下载链接&#xff…

蚓链数字化生态平台:构建城市智能商业,引领协同发展新潮流

​在当今数字化飞速发展的时代&#xff0c;城市商业的运行模式正在经历着数字化变革。蚓链数字化生态平台应运而生&#xff0c;以其强大的功能和创新的理念&#xff0c;成为构建城市智能商业枢纽中心的关键力量&#xff0c;推动着平台互通、业务贯通、管理协同的全新发展格局。…

五个优秀的免费 Ollama WebUI 客户端推荐

认识 Ollama 本地模型框架&#xff0c;并简单了解它的优势和不足&#xff0c;以及推荐了 5 款开源免费的 Ollama WebUI 客户端&#xff0c;以提高使用体验。 什么是 Ollama&#xff1f; Ollama 是一款强大的本地运行大型语言模型&#xff08;LLM&#xff09;的框架&#xff0c…

opencascade AIS_ManipulatorOwner AIS_MediaPlayer源码学习

前言 AIS_ManipulatorOwner是OpenCascade中的一个类&#xff0c;主要用于操纵对象的交互控制。AIS_ManipulatorOwner结合AIS_Manipulator类&#xff0c;允许用户通过可视化工具&#xff08;如旋转、平移、缩放等&#xff09;来操纵几何对象。 以下是AIS_ManipulatorOwner的基…

深度强化学习 ②(DRL)

参考视频&#xff1a;&#x1f4fa;王树森教授深度强化学习 前言&#xff1a; 最近在学习深度强化学习&#xff0c;学的一知半解&#x1f622;&#x1f622;&#x1f622;&#xff0c;这是我的笔记&#xff0c;欢迎和我一起学习交流~ 这篇博客目前还相对比较乱&#xff0c;后面…

angular入门基础教程(一)环境配置与新建项目

ng已经更新到v18了&#xff0c;我对他的印象还停留在v1,v2的版本&#xff0c;最近研究了下&#xff0c;与react和vue是越来越像了&#xff0c;所以准备正式上手了。 新官网地址:https://angular.cn/ 准备条件 nodejs > 18.0vscodeng版本18.x(最新的版本) {"name&qu…

【前端 17】使用Axios发送异步请求

Axios 简介与使用&#xff1a;简化 HTTP 请求 在现代 web 开发中&#xff0c;发送 HTTP 请求是一项常见且核心的任务。Axios 是一个基于 Promise 的 HTTP 客户端&#xff0c;适用于 node.js 和浏览器&#xff0c;它提供了一种简单的方法来发送各种 HTTP 请求。本文将介绍 Axio…

【虚拟化】KVM概念和架构

目录 一、什么是KVM&#xff1f; 二、KVM的功能 2.1 主要的功能 2.2 其它功能 三、KVM核心组件及作用 四、KVM与VMware的优势 五、KVM架构 六、qemu介绍 七、创建虚拟机流程 一、什么是KVM&#xff1f; Kernel-based Virtual Machine的简称&#xff0c;KVM 是基于虚拟…

ubuntu部署k8s/microk8s安装部署

资源 节点名称IP配置系统node310.2.20.174核8GUbuntu Server 22.04 LTS 64bitnode210.2.24.44核8GUbuntu Server 22.04 LTS 64bitnode110.2.20.134核8GUbuntu Server 22.04 LTS 64bitmaster10.2.24.104核8GUbuntu Server 22.04 LTS 64bit ps:所有命令尽量使用root账号操作 1…