Pinia的基本用法

Pinia的安装和引入

1.安装Pinia

npm install pinia

2. 在vue项目的main.js文件中引入pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'const pinia = createPinia()
const app = createApp(App)app.use(pinia)
app.mount('#app')

Pinia的基本使用

使用pinia实现计数器

1.在src目录下创建stores目录,并新建文件counter.js
在这里插入图片描述
**2. 在counter.js文件中使用defineStore定义对象useCounterStore **

import { defineStore } from 'pinia'
import { ref } from 'vue'export const useCounterStore = defineStore('counter', () => {// 定义数据(state)const count = ref(0)// 定义修改数据的方法(action 同步+异步)const increment = () => {count.value++}// 以对象的方式return供组件使用return {count,increment}
})

**3.在App.vue文件中导入counter.js文件中的useCounterStore **

<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
</script><template><button @click="counterStore.increment"> {{ counterStore.count}} </button>
</template><style scoped></style>

getters和异步action

在counter.js文件中进行如下定义

import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import axios from 'axios'const API_URL = "http://geek.itheima.net/v1_0/channels"
export const useCounterStore = defineStore('counter', () => {// 定义数据(state)const count = ref(0)// 定义修改数据的方法(action 同步+异步)const increment = () => {count.value++}// getter定义const doubleCount = computed(() => count.value * 2)// 定义异步actionconst list = ref([])const getList = async () => {const res = await axios.get(API_URL)list.value = res.data.data.channels}// 以对象的方式return供组件使用return {count,doubleCount,increment,list,getList}
})

在App.vue中使用

<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)
onMounted(()=>{ // 挂载期发起请求counterStore.getList()
})
</script><template><button @click="counterStore.increment"> {{ counterStore.count}} </button>{{ counterStore.doubleCount }}<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>

使用storeToRefs进行结构赋值,保持响应式更新

<script setup>
// 1. 导入use打头的方法
import { useCounterStore } from '@/stores/counter'
import { onMounted } from 'vue';
import { storeToRefs } from 'pinia'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore)// 直接结构赋值(响应式丢失)
// const { count, doubleCount} = counterStore
// console.log(count, doubleCount)// 方法包裹(保持响应式更新)
const { count, doubleCount } = storeToRefs(counterStore)
console.log(count, doubleCount)// 方法直接从原来的counterStore解构赋值
const { increment } = counterStore// 触发action
onMounted(()=>{ counterStore.getList()
})
</script><template><button @click="increment"> {{ count }} </button>{{ doubleCount }}<ul><li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li></ul>
</template><style scoped></style>

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

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

相关文章

日志打印中对容器(包括多级容器)的通用输出

在日志打印中&#xff0c;往往有打印一个数组、集合等容器中的每个元素的需求&#xff0c;这些容器甚至可能嵌套起来&#xff0c;如果每个地方都用for循环打印&#xff0c;将会特别麻烦。基于这种需求&#xff0c;作者尝试实现一个通用的打印函数SeqToStr()&#xff0c;将容器序…

线上民族传统服饰商城

摘 要 随着互联网的不断发展和普及&#xff0c;电子商务成为了人们生活中不可或缺的一部分。传统的线下购物方式逐渐被线上购物所取代&#xff0c;人们越来越习惯在互联网上购物。而民族传统服饰作为我国丰富多样的民族文化的重要组成部分&#xff0c;具有独特的艺术价值和商业…

unity VR Interaction Framework 创建新手势

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、新建物体&#xff0c;并添加必要组件二、添加抓取点三、查看手势的可视化样式四、制作新的手势1.点击编辑2.根据需求调节手指关节3.保存手势4. 使用创建的手势5.运行 总结 前言…

等保测评——安全通信网络——安全区域边界

安全通信网络 网络架构 a) 应保证网络设备的业务处理能力满足业务高峰期需要&#xff1b; b) 应保证网络各个部分的带宽满足业务高峰期需要&#xff1b; c) 应划分不同的网络区域&#xff0c;并按照方便管理和控制的原则为各网络区域分配地址&#xff1b; 应核查是否依据重…

远程过程调用协议gRPC及在go环境下的使用

1. 远程过程调用协议 1.1 定义 远程过程调用(Remote Procedure Call&#xff0c;PRC是一种进程间通信技术&#xff0c;它使得程序可以像调用本地函数一样调用远程服务器上的函数。RPC 屏蔽了底层的通信细节&#xff0c;让开发者能够更专注于业务逻辑&#xff0c;而无需关心网络…

无源电压继电器 JDY-1210AW 导轨安装 约瑟JOSEF

系列型号&#xff1a; JDY-1002AW电压继电器&#xff1b;JDY-1002B电压继电器&#xff1b; JDY-1110AW电压继电器&#xff1b;JDY-1110B电压继电器&#xff1b; JDY-1220AW电压继电器&#xff1b;JDY-1220B电压继电器&#xff1b; JDY-1100AW电压继电器&#xff1b;JDY-110…

服务器数据恢复—用raid6阵列磁盘组建raid5阵列如何恢复原raid数据?

服务器存储数据恢复环境&#xff1a; 华为OceanStor 5800存储&#xff0c;该存储中有一组由10块硬盘组建的raid6磁盘阵列&#xff0c;供企业内部使用&#xff0c;服务器安装linux操作系统EXT3文件系统&#xff0c;划分2个lun。 服务器存储故障&#xff1a; 管理员发现存储中rai…

JavaScript的学习之dom的查询(一)

一、获得元素 通过document对象调用&#xff1a; getElementById()&#xff1a;通过id属性获取一个元素节点对象getElementsByTagName()&#xff1a;通过标签名获取一组元素节点对象getElementsByName()&#xff1a;通过name属性来获取一组元素节点对象 核心学习代码 <scrip…

记录一次即将出现的钓鱼新方式

钓鱼通常是内网渗透过程中的最为常见的入口方式&#xff0c;但是随着蓝队人员溯源反制思路开阔&#xff0c;入侵排查能力提升&#xff0c;钓鱼也越来越困难&#xff0c;这里就记一种不同寻常的钓鱼方式。 pip install 的执行流程&#xff1a; 先获取到远端的服务器地址 url 比…

node.js 面试题 1

### 明天要去面试了 今天晚上突击一下node.js 什么是Node.js&#xff1f;它有什么特点&#xff1f; Node.js是一个基于Chrome V8引擎的JavaScript运行环境&#xff0c;它允许在服务器端运行JavaScript代码。它的特点包括单线程、非阻塞I/O、事件驱动等 …

dispatch_after

dispatch_after dispatch_after dispatch_after dispatch_after函数并不是延迟对应时间后立即执行block块中的操作&#xff0c;而是将任务追加到对应队列中&#xff0c;考虑到队列阻塞等情况&#xff0c;所以这个任务从加入队列到真正执行的时间是不准确的。 dispatch_after(…

Kubernetes CSI livenessprobe探活

Kubernetes CSI livenessprobe探活 要实现一个Kubernetes CSI的livenessprobe探活&#xff0c;可以有以下三种方法&#xff1a; HttpServer 1、在CSI中实现一个简单的HttpServer&#xff0c;暴露探活接口&#xff1b; GRPC探测 2、CSI镜像中&#xff0c;增加grpcurl命令&a…

单目标应用:基于吸血水蛭优化器(Blood-Sucking Leech Optimizer,BSLO)的微电网优化(MATLAB代码)

一、微电网模型介绍 微电网多目标优化调度模型简介_vmgpqv-CSDN博客 参考文献&#xff1a; [1]李兴莘,张靖,何宇,等.基于改进粒子群算法的微电网多目标优化调度[J].电力科学与工程, 2021, 37(3):7 二、吸血水蛭优化器求解微电网 2.1算法简介 吸血水蛭优化器&#xff08;B…

【Java Web】Tomcat服务器

目录 一、Tomcat是什么 二、Tomcat安装 三、Tomcat相关目录 四、Web项目标准目录结构规范 五、Tomcat项目部署方式 六、IDEA关联本地Tomcat 七、HTTP协议 7.1 http的交互方式 7.1.1 http长连接和短连接 7.1.2 http1.1缓存机制 7.2 http数据报文格式 八、常见响应状态码 一、Tom…

印刷企业数字工厂管理系统如何保障产品质量

一、引言 随着信息技术的迅猛发展&#xff0c;印刷行业也迎来了数字化转型的浪潮。数字工厂管理系统作为这一转型的核心工具&#xff0c;不仅在提高生产效率、优化资源配置方面发挥了重要作用&#xff0c;更在保障产品质量上扮演着关键角色。本文将深入探讨印刷企业数字工厂管…

浏览器扩展V3开发系列之 chrome.contextMenus 右键菜单的用法和案例

【作者主页】&#xff1a;小鱼神1024 【擅长领域】&#xff1a;JS逆向、小程序逆向、AST还原、验证码突防、Python开发、浏览器插件开发、React前端开发、NestJS后端开发等等 chrome.contextMenus 允许开发者向浏览器的右键菜单添加自定义项。 在使用 chrome.contextMenus 之前…

本地读取classNames txt文件

通过本地读取classNames,来减少程序修改代码,提高了程序的拓展性和自定义化。 步骤: 1、输入本地路径,分割字符串。 2、将className按顺序放入vector容器中。 3、将vector赋值给classNmaes;获取classNames.size(),赋值给CLASSES;这样,类别个数和类别都已经赋值完成。…

Python | Leetcode Python题解之第199题二叉树的右视图

题目&#xff1a; 题解&#xff1a; class Solution:def rightSideView(self, root: TreeNode) -> List[int]:rightmost_value_at_depth dict() # 深度为索引&#xff0c;存放节点的值max_depth -1stack [(root, 0)]while stack:node, depth stack.pop()if node is not…

第N8周:seq2seq翻译实战-Pytorch复现

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 一、前期准备 from __future__ import unicode_literals, print_function, division from io import open import unicodedata import s…

什么是堡垒机(运维审计系统)?

一、堡垒机是什么 1.1 堡垒机的来由 堡垒机是从跳板机&#xff08;也叫前置机&#xff09;的概念演变过来的。早在2000年左右的时候&#xff0c;一些中大型企业为了能对运维人员的远程登录进行集中管理&#xff0c;会在机房部署一台跳板机。 跳板机其实就是一台lunix/windows…