pinia从入门到使用

pinia: 比vuex更适合vue3的状态管理工具,只保留了vuex 原有的 state, getters,actions 作用等同于 data computed methods,可以有多个 state

1.安装创建导入
安装:npm install piniayarn add pinia
创建stores/index.js
index.js

import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia

导入

import { createApp } from 'vue'
import App from './App.vue'
import pinia from "./stores/index"
createApp(App).use(pinia).mount('#app')

2 使用state
在stores下新建 counter.js文件夹,使用defineStore 创建 传入一个(唯一名称), 命名时一般使用use + (唯一名称)

import { defineStore } from 'pinia'
const useCounter = defineStore('counter', {state: () => ({count: 99,name:'陆青',age:24,level: 200})
})
export default useCounter

在页面使用 不推荐使用解构赋值 ,解构之后不是响应式的 但可以通过vue 的 toRefs 以及 pinia 提供的 storeToRefs 变为响应式

<template><div><div>{{ counterStore.count }}</div><div>{{ count }}</div><button @click="add">+1</button><hr/><h1>{{name}}</h1><h1>{{age}}</h1><h1>{{level}}</h1><button @click="updateState">修改state</button><button @click="resetState">初始化state</button></div>
</template>
<script setup>
// pinia  只有 state getters actions 等同于 data computed methods
// pinia  可以有多个 state  使用defineStore 创建 传入一个(唯一名称), 命名时一般使用use + (唯一名称),
// pinia  不推荐使用解构赋值 ,解构之后不是响应式的  但可以通过vue 的 toRefs 以及 pinia 提供的 storeToRefs 变为响应式
import useCounter from "./stores/counter";
import { toRefs } from "vue";
import { storeToRefs } from "pinia";
const counterStore = useCounter();// const { count } = toRefs(counterStore);
const { count,name,age,level } = storeToRefs(counterStore);
function add() {counterStore.count++;
}
function updateState(){// 单个修改// counterStore.name = '陆景'// counterStore.age = 22//多个修改counterStore.$patch({name:'青子',age:100,level:220})
}
function resetState(){counterStore.$reset()
}
</script>

3使用 getters
在stores下新建 user.js文件夹
方法一:使用 state

// 使用 stategetContent(state) {return state.name + state.content},

方法二:使用this

 // 使用thisgetLive() {return '我很喜欢的一句话是' + this.getContent},

接收函数

  // 接收函数getFun(state) {return function (id) {for (var i = 0; i < state.list.length; i++) {const item = state.list[i]if(item.id == id){return item}}}},

使用别的state 里面的值

import useCounter from './counter'//使用别的stateshowMessage(state) {const storeCounter = useCounter()return this.getContent + '我是另一个state里面的' + storeCounter.name}

完整的user.js

import { defineStore } from 'pinia'
import useCounter from './counter'const useUser = defineStore('user', {state: () => ({list: [{name: 'vuex',id: 11},{name: 'pinia',id: 22}],name: '言念',content: '君子,温其如玉'}),getters: {// 使用 stategetContent(state) {return state.name + state.content},// 使用thisgetLive() {return '我很喜欢的一句话是' + this.getContent},// 接收函数getFun(state) {return function (id) {for (var i = 0; i < state.list.length; i++) {const item = state.list[i]if(item.id == id){return item}}}},//使用别的stateshowMessage(state) {const storeCounter = useCounter()return this.getContent + '我是另一个state里面的' + storeCounter.name}}
})
export default useUser

在页面使用

<template><div><h1>{{ storeUser.getContent }}</h1><h1>{{ storeUser.getLive }}</h1><h1>id为11:{{ storeUser.getFun(11)}}</h1><h1>{{ storeUser.showMessage }}</h1></div>
</template>
<script setup>
import useUser from "./stores/user";
const storeUser = useUser();
</script>
<style>
</style>

3 使用actions
在stores下新建 home.js文件夹

import { defineStore } from 'pinia'const useBanner = defineStore('banner', {state: () => ({banner: [],count: 10}),actions: {getCount(num) {this.count += num},async getBanner() {const res = await fetch('xxx/xxx/xxx')const data = await res.json()console.log(data.data.banner.list);this.banner = data.data.banner.listconsole.log(this.banner);}}
})export default useBanner

在页面使用

<template><div><h1>{{ storeBanner.count }}</h1><button @click="getAdd">+10</button><div v-for="(item,index) in  storeBanner.banner" :key="index"><img :src="item.image"/></div></div>
</template>
<script setup>
import useBanner from "./stores/home";
const storeBanner = useBanner();
function getAdd() {storeBanner.getCount(10);
}
storeBanner.getBanner().then(res=>{console.log('请求完成了!!');
})
</script>

效果图
在这里插入图片描述

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

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

相关文章

python+pytest接口自动化(4)-requests发送get请求

python中用于请求http接口的有自带的urllib和第三方库requests&#xff0c;但 urllib 写法稍微有点繁琐&#xff0c;所以在进行接口自动化测试过程中&#xff0c;一般使用更为简洁且功能强大的 requests 库。下面我们使用 requests 库发送get请求。 requests库 简介 request…

网络和Linux网络_7(传输层)UDP和TCP协议(端口号+确认应答+超时重传+三次握手四次挥手)

目录 1. 重看端口号 1.1 端口号的概念 1.2 端口号的划分 2. 重看UDP协议 2.1 UDP协议格式 2.2 UDP的特点 3. 重看TCP协议 3.1 TCP协议格式 3.2 TCP的解包分用 3.3 TCP的可靠性及机制 3.3.1 确认应答ACK机制 3.3.2 超时重传机制 3.3.3 连接管理机制&#xff08;三次…

手写工作流设计模式,针对常见的工作流步骤流转,减少过多的if/else,提升编程思维

需求 这一年下来&#xff0c;写两次工作流流转&#xff0c;总结下经验。 第一次写的时候&#xff0c;只找到用模版设计模式包裹一下&#xff0c;每个方法都做隔离&#xff0c;但是在具体分支实现的时候&#xff0c;if/else 满屏分&#xff0c;而且因为要针对不同情况&#xff…

Linux系统centos7防火墙firewall开放IP及端口命令

CentOS7使用的是firewall防火墙&#xff0c;不再是原来的iptables 防火墙基础命令 1&#xff1a;查看firewall防火墙状态 firewall-cmd --state //或 systemctl status firewalld2&#xff1a;打开防火墙 systemctl start firewalld3&#xff1a;关闭防火墙 systemctl sto…

什么牌子的led台灯质量好?考研必备五款护眼台灯推荐

眼睛更是心灵的窗户&#xff0c;我们通过这扇窗来欣赏这个美好的世界。而如今&#xff0c;近视在儿童中已司空见惯&#xff0c;近视率逐年提高&#xff0c;并且低龄化的现状更加突出。据世界卫生组织的最新研究报告&#xff0c;目前中国近视患者人数多达6亿&#xff0c;其中我国…

20. Matplotlib 数据可视化

目录 1. 简介2. Matplotlib 开发环境2.1 画图2.2 画图接口2.4 线形图2.5 散点图2.6 等高线图2.7 直方图 1. 简介 Matplotlib网址&#xff1a;https://matplotlib.org/ 数据可视化是数据分析中最重要的工作之一。Matploblib是建立在Numpy数组基础上的多平台数据可视化程序库&a…

WPF前端实现人脸扫描动画效果

前言 本章实现的效果主要通过OpacityMask与LinearGradientBrush(径向渐变) 的组合应用来实现。最终实现效果如下: LinearGradientBrush线性渐变画刷 LinearGradientBrush其实很简单,我们只需要关注5个属性,使用这5个属性你就可以完成这个画刷几乎所有的变化。 属性介…

样品实验Placcel230N聚己内酯二元醇PCL说明书

样品实验Placcel230N聚己内酯二元醇PCL说明书 1KG/罐

财报解读:三季度的美国零售,“沃尔玛效应”仍在持续

经济学中常用“沃尔玛效应”来指代“消费者减少消费时&#xff0c;会选择每种类别中价格最低的商品”这一现象。作为全球最大的零售商&#xff0c;沃尔玛一定程度上成为了消费市场的风向标。 近日&#xff0c;沃尔玛发布的2024财年第三季度财报显示&#xff0c;其相较去年同期…

Linux:Ubuntu系统安装软件

本次以安装vim为例 sudo apt-get remove vim //卸载vim sudo apt-get install vim //安装vim sudo apt-cache show vim //获取vim软件信息安装时间较长。 安装完成后&#xff0c;执行下第三条指令&#xff0c;测试下是否安装成功即可。

c#把bitmap格式转换为其他格式图片

增加引用命名空间 using System.Drawing.Imaging; 打开对话框的方式读入bmp格式图片&#xff0c;转换为其他格式。 也可以直接传入图片名称。 OpenFileDialog ofd new OpenFileDialog();ofd.Title "打开对话框";ofd.InitialDirectory "D:/";ofd.Filt…

ASM字节码操作类库(打开java语言世界通往字节码世界的大门) | 京东云技术团队

前言&#xff1a;授人以鱼不如授人以渔&#xff0c;应用asm的文章有很多&#xff0c;简单demo的也很多&#xff0c;那么ASM都具备哪些能力呢&#xff1f;如何去学习编写ASM代码呢&#xff1f;什么样的情景需要用到ASM呢&#xff1f;让我们带着这些问题阅读这篇文章吧。 这里由…

linux服务器安装gitlab

一、安装gitlab sudo yum install curl policycoreutils-python openssh-server openssh-clients sudo systemctl enable sshd sudo systemctl start sshd sudo firewall-cmd --permanent --add-servicehttp curl https://packages.gitlab.com/install/repositories/gitla…

Golang并发模型:Goroutine 与 Channel 初探

文章目录 goroutinegoexit() channel缓冲closerangeselect goroutine goroutine 是 Go 语言中的一种轻量级线程&#xff08;lightweight thread&#xff09;&#xff0c;由 Go 运行时环境管理。与传统的线程相比&#xff0c;goroutine 的创建和销毁的开销很小&#xff0c;可以…

sap系统连接其它系统

本文来自博客园&#xff0c;作者&#xff1a;Lovemywx2&#xff0c;转载请注明原文链接&#xff1a;https://www.cnblogs.com/1187163927ch/p/8669859.html JAVA连接ORACLE数据库 1&#xff0c;首先需要在Oracle安装完成之后新建一个用户 --新建用户 create user chenh iden…

BOM浏览器对象模型

BOM(Browser Object Model) 浏览器对象模型 操作浏览器api和接口 1.打开链接 返回一个窗口对象 w window.open(url,"_blank",wi…

原神:夏洛蒂是否值得培养?全队瞬抬治疗量不输五星,但缺点也很明显

作为四星冰系治疗角色&#xff0c;夏洛蒂的实战表现可以说相当让人惊喜。不仅有相当有意思的普攻动作以及技能特效&#xff0c;而且她还有治疗和挂冰等功能性。下面就来详细聊聊夏洛蒂是否值得培养。 【治疗量让人惊喜&#xff0c;但也有缺点】 说实话&#xff0c;在使用夏洛蒂…

陶陶摘苹果、跳跃游戏

1. 陶陶摘苹果 题目描述&#xff1a; 陶陶家的院子里有一棵苹果树&#xff0c;每到秋天树上就会结出 10 个苹果。苹果成熟的时候&#xff0c;陶陶就会跑去摘苹果。陶陶有个 30 厘米高的板凳&#xff0c;当她不能直接用手摘到苹果的时候&#xff0c;就会踩到板凳上再试试。 现在…

Spring第三课,Lombok工具包下载,对应图书管理系统列表和登录界面的后端代码,分层思想

目录 一、Lombok工具包下载 二、前后端互联的图书管理系统 规范 三、分层思想 三层架构&#xff1a; 1.表现层 2.业务逻辑层 3.数据层 一、Lombok工具包下载 这个工具包是为了做什么呢&#xff1f; 他是为了不去反复的设置setting and getting 而去产生的工具包 ⚠️工具…

(5h)Unity3D快速入门之Roll-A-Ball游戏开发

DAY1&#xff1a;Unity3D安装 链接 DAY2&#xff1a;构建场景&#xff0c;编写代码 链接 内容&#xff1a;WASD前后左右移动、摄像机跟随 DAY3&#xff1a;待更新 DAY4&#xff1a;待更新 DAY5&#xff1a;待更新