【vue3】基础知识点-pinia

news2024/11/16 17:55:49

学习vue3,都会从基础知识点学起。了解setup函数,ref,recative,watch、computed、pinia等如何使用

今天说vue3组合式api,pinia

戳这里,跳转pinia中文文档

官网的基础示例中提供了三种写法
1、选择式api,类似于vuex的写法
在这里插入图片描述
2、组合式api,vue3 组合式api写法
在这里插入图片描述
3、借助辅助函数mapStores()、mapState() 或 mapActions()
在这里插入图片描述

本文主要讲第二种写法,它与vue3的语法风格是统一的

使用:
1、定义store(state+action+getters)
//defineStore函数创建store实例对象
//defineStore函数需要传递两个参数,第一个参数:小仓库名字(唯一id,不可重复,
用于区分是哪个store,这样就不会出现命名冲突,组件中使用仓库数据是通过定义变量(useCounterStore )接收defineStore方法返回的函数,和仓库名(counter)没有直接关系)
//第二个参数:小仓库配置对象
//defineStore方法执行会返回一个函数,函数作用就是让组件可以获取到仓库数据

import {defineStore} from 'pinia'
import {ref} from 'vue'
import axios from 'axios'

export const useCounterStore = defineStore('counter',()=>{
//数据(state)
const count = ref(0)
const API_URL = '/api/booklist'
cosnt list = ref([])

//getter
const deoubleCount = computed(()=>count.value*2)

//修改数据的方法
//(同步action)
const increment= ()=>{
count.value++
}
//(异步action,与组件中定义数据和方法的风格完全一致)
const loadList = async ()=>{
const res = await axios.get(API_URL)
list.value = res.data 
}
//以对象形式返回
return {count,increment,deoubleCount,list,loadList  }
})

2、组件使用store

<script setup>
//1、导入`useCounterStore `方法
import {useCounterStore } from '@/stores/counter'

//2、执行方法得到counterStore对象
const counterStore = useCounterStore ()

console.log(counterStore)

//counterStore 对象包含的就是counter仓库中return出来的对象

onMounted(()=>{
counterStore.loadList()  
})

</script>

<template>

<button @click="counterStore.increment ">

{{counterStore.count}}{{counterStore.deoubleCount }}

</button>

<ul>
<li v-for="item in counterStore.list" :key="item.id")>
{{item.name}}
</li>
</ul>

</template>

打印counterStore
在这里插入图片描述

storeToRefs

为什么要使用storeToRefs,可以简化写法,原先的counterStore.count通过解构可以直接使用count。中文文档中特意注明,不能直接对store进行解构,会破坏响应式。响应式丢失,视图也不再更新。所以使用storeToRefs函数可以辅助保持数据(state+getter)的响应式解构

在这里插入图片描述
有效写法:
在这里插入图片描述

在这里插入图片描述
观察下区别,错误写法下,打印count,deoubleCount ,拿到的是两个0

在这里插入图片描述

正确写法下,,打印count,deoubleCount ,拿到的是两个响应式的对象
在这里插入图片描述
方法不需要通过storeToRefs函数解构赋值,直接从原来的counterStore中解构赋值

const {increment } = counterStore

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

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

相关文章

性能测试场景分析并设计?超细案例讲解

前言 性能测试场景&#xff0c;其实和功能测试没什么区别&#xff0c;只是侧重点不同。 我们在功能测试中经常用到的等价类边界值等分析和设计测试case的方法&#xff0c;目的是为了尽可能的覆盖业务场景&#xff0c;避免遗漏导致的功能逻辑缺失或者未达到预期。 而在性能测试…

【C++】初识模板

C模板入门 一、泛型编程 二、函数模板1. 函数模板的概念2. 函数模板格式3. 函数模板的原理4. 函数模板的实例化5. 模板参数的匹配原则 三、类模板 一、泛型编程 假设我们想实现一个交换函数&#xff0c;并且支持不同类型的参数实现&#xff0c;我们可以用 typedef 将类型进行重…

V2MOM工作法

V2MOM分别代表愿景&#xff08;vision&#xff09;、价值&#xff08;values&#xff09;、方法&#xff08;methods&#xff09;、障碍&#xff08;obstacles&#xff09;、衡量指标&#xff08;measurement&#xff09;。 第一&#xff0c;我真正想要的是什么呢&#xff1f;这…

ubuntu磁盘管理

show partition information 挂载设备在这 显示文件系统信息 build file system mkfs -t ext4 /dev/nvme0n1p4命令作用&#xff1a;将/dev/nvme0n1p4 格式化为 ext4 建立交换分区 mkswap -c -v1 /dev/nvme0n1p4 102400-c&#xff1a;check -v1&#xff1a;新版交换分区 -v0&…

四、web应用程序技术——HTTP

文章目录 1 HTTP请求2 HTTP响应3 HTTP方法4 URL5 HTTP消息头5.1 常用消息头5.2 请求消息头5.3 响应消息头 6 cookie7 状态码8 HTTP代理9 HTTP身份验证 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是访问万维网使用的核心通信协议&…

Linux 1.2.13 -- IP分片重组源码分析

Linux 1.2.13 -- IP分片重组源码分析 引言为什么需要分片传输层是否存在分段操作IP分片重组源码分析ip_createip_findip_frag_createip_doneip_glueip_freeip_expireip_defragip_rcv 总结 本文源码解析参考: 深入理解TCP/IP协议的实现之ip分片重组 – 基于linux1.2.13 计网理论…

2023Android面试,如果想卷请继续。备战金九银十

随着移动互联网的快速发展&#xff0c;Android开发岗位竞争也越来越激烈。作为一名Android程序员&#xff0c;面试是进入理想公司的重要一步。本文将分析市场对Android开发岗位的需求&#xff0c;分析2022年的Android开发岗位面试情况&#xff0c;并总结出历年来常见的面试题目…

MySQL中同比和环比语句如何写?

营收表如下&#xff08;表名&#xff1a;a&#xff09;如下图&#xff1a; 营收表 year month money 2021 1 1000 2021 2 1200 2022 1 1300 2022 2 1500 需要算出2022年营收同比与环比&#xff1a; 同比&#xff1a;和去年同月相比&#xff08;1300-1000/1000*100%&#xff0…

Python类的设计

Python类的设计 # 定义一个闹钟类 class Clock:__cureen_keyNone # 私有成员不能改变和使用def __init__(self, id, price): # 类对象是立即自动执行self.id idself.price pricedef ring(self):import winsound # 内置声音方法winsound.Beep(2000,3000)clock1 Clock(…

自然语言处理学习笔记(六)————字典树

目录 1.字典树 &#xff08;1&#xff09;为什么引入字典树 &#xff08;2&#xff09;字典树定义 &#xff08;3&#xff09;字典树的节点实现 &#xff08;4&#xff09;字典树的增删改查 DFA&#xff08;确定有穷自动机&#xff09; &#xff08;5&#xff09;优化 1.…

Python基础--序列操作/函数

Python基础 1.序列的操作 2.函数 1. 数据类型的具体操作 1.1 序列操作--列表具体操作&#xff1a; #定义列表 listA [] #定义一个空列表 listB [1,2.8,"你好",listA,[1,2,3]] # 访问列表 print(listB)#查看整个列表 print(listB[2])#查看单个…

docker 安装mongodb 虚拟机安装mongodb

生产环境直接安装比较好&#xff0c;以及使用集群环境&#xff0c;本文仅测试交流使用&#xff0c;我用来写分布式im测试使用&#xff1a; nami-im: 分布式im, 集群 zookeeper netty kafka nacos rpc主要为gate&#xff08;长连接服务&#xff09; logic &#xff08;业务&…

MySQL:内置函数、复合查询和内外连接

内置函数 select 函数; 日期函数 字符串函数 数学函数 其它函数 复合查询&#xff08;多表查询&#xff09; 实际开发中往往数据来自不同的表&#xff0c;所以需要多表查询。本节我们用一个简单的公司管理系统&#xff0c;有三张 表EMP,DEPT,SALGRADE来演示如何进行多表查询…

设计模式行为型——访问者模式

目录 访问者模式的定义 访问者模式的实现 访问者模式角色 访问者模式类图 访问者模式举例 访问者模式代码实现 访问者模式的特点 优点 缺点 使用场景 注意事项 实际应用 访问者模式的定义 访问者模式&#xff08;Visitor Pattern&#xff09;属于行为型设计模式&am…

总结950

7:00起床 7:30~8:00复习单词300个&#xff0c;记忆100个 8:10~9:30数学660&#xff0c;只做了10道题&#xff0c;发现对各知识点的掌握程度不一。有些熟练&#xff0c;有些生疏 9:33~10:25计算机网络课程1h 10:32~12:02继续660&#xff0c;也不知道做了几道 2:32~4:00数据…

Node.js |(四)HTTP协议 | 尚硅谷2023版Node.js零基础视频教程

学习视频&#xff1a;尚硅谷2023版Node.js零基础视频教程&#xff0c;nodejs新手到高手 文章目录 &#x1f4da;HTTP概念&#x1f4da;窥探HTTP报文&#x1f4da;请求报文的组成&#x1f407;HTTP请求行&#x1f407;HTTP请求头&#x1f407;HTTP的请求体 &#x1f4da;响应报文…

阔别三年,领先回归!别克LPGA锦标赛申城十月再启高球盛会

2023年8月4日——2023年金秋十月&#xff0c;阔别中国赛场已久的别克LPGA锦标赛将强势归来&#xff0c;于10月12日至15日在上海旗忠花园高尔夫俱乐部再次拉开帷幕。作为三年来首个回归、同时也是今年国内唯一开赛的国际顶级高尔夫职业赛事&#xff0c;别克LPGA锦标赛将吸引全世…

零代码集成融云连接更多应用

融云是安全、可靠的全球互联网通信云服务商&#xff0c;向开发者和企业提供即时通讯和实时音视频通信云服务。 场景描述&#xff1a; 基于融云的开放api能力&#xff0c;无代码集成融云平台的音视频通话、即时通信、聊天室、短信等业务&#xff0c;使融云连通其它应用。通过A…

Mirror网络库 | 说明

此篇为上文&#xff0c;下篇&#xff1a;Mirror网络库 | 实战 一、介绍 基于UNET&#xff0c;从2014年经过9年实战测试&#xff1b;服务器和客户端是一个项目&#xff1b;使用NetworkBehaviour而不是MonoBehaviour&#xff0c;还有NetworkServer和NetworkClient&#xff1b;Mi…

nodejs安装ffi报错,windows-build-tools安装不成功

首先要确定nodejs的版本 要使用v17.x.x版本的nodejs Index of /dist/latest-v17.x/&#xff0c;才能安装windows-build-tools npm install --global --production windows-build-tools 执行命令 他会去下载很多编译需要用的文件。一方面是python27&#xff0c;另一方面是B…