当前位置: 首页 > news >正文

[vue3] pinia的基本使用

使用Pinia

npm install pinia

store文件里index.js

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

main.js导入并引用

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

pinia的状态管理,不同状态可以区分不同文件
在这里插入图片描述

//定义关于counter的store
import { defineStore } from ‘pinia’//defineStore 是返回一个函数 函数命名最好有use前缀,根据函数来进行下一步操作
const useCounter = defineStore('counter',{state: () => {count:99}
})export default useCounter

调用pinia,获取pinia状态值,导入Counter.js,获取Counter.js里面state.count

<template><div class="home"><h2>Home View</h2><h2>count: {{ counterStore.count }}</h2></div>
</template><script setup>import useCounter from '@/stores/counter';const counterStore = useCounter()</script><style scoped>
</style>

注意:pinia解构出来的state也是可以调用,但会失去响应式,需要toRef或者pinia自带storeToRefs

<template><div class="home"><h2>Home View</h2><h2>count: {{ counterStore.count }}</h2><h2>count: {{ count }}</h2><button @click="incrementCount">count+1</button></div>
</template><script setup>import { toRefs } from 'vue'import { storeToRefs } from 'pinia'import useCounter from '@/stores/counter';const counterStore = useCounter()// const { count } = toRefs(counterStore)const { count } = storeToRefs(counterStore)function incrementCount() {counterStore.count++}</script><style scoped>
</style>

store的核心部分:state,getter,action
(相当于:data、computed、methods)

State

读取和写入state:


const counterStore = useCounter()counterStore.counter++
counterStore.name = 'coderWhy'

重置State reset

const counterStore = useCounter()
conterStore.$reset()

改变State patch

const counterStore = useCounter()counterStore.$patch({counter:100,name:'kobe'
})

替换State

conterStore.$state = {counter:1,name:'why'
}

Getters

Getters相当于Store的计算属性computed:

用defineStore()中的getters属性定义
getters中可以定义接受一个state作为参数的函数

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{doubleCounter(state){return state.counter *2}}
})

访问当前Store里getters方法

const counterSotre = useCounter()
console.log(counterStore.doublCounter)

使用this来访问当前的store实例中getters

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{doubleCounter(state){return state.counter *2}doubleCounterAdd(){//this指向storereturn this.doubleCounter +1 }}
})

访问其它store的getters

import useUser from ./userconst userStore = useUser()expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounterUser(){return this.doubleCounter + userStore.umu}}
})

通过getters可以返回一个函数,可以传参数

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounter(state){return function (is) {return state.id + id}}}
})
const StoreConter = useCounter();
//传参
StoreCounter.doublCounter(111)

Actions

Actions 相当于组件中的methods,可以使用defineStore()中的actions属性定义
和getters一样,在action中可以通过this访问整个store实例:

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounter(state){return function (is) {return state.id + id}}},actions:{increment(){this.counter++},//传参incrementnum(num){this.counter += num}}
})

Actions执行异步操作 await

actions:{async fetchHome(){//请求const res = await fetch('?????')const data = await res.json()console.log('data',data)return data}
}
cosnt counterStore = useCountercounterStore.fetchHome().then(res => {console.log(res)
})


Vue3-Pinia的基本使用

相关文章:

[vue3] pinia的基本使用

使用Pinia npm install piniastore文件里index.js import { createPinia } from piniaconst pinia createPinia()export default piniamain.js导入并引用 import { createApp } from vue import App from ./App.vue import pinia from ./storescreateApp(App).use(pinia).m…...

进程和线程详解

在计算机领域中&#xff0c;进程和线程是非常重要的概念。了解进程和线程是软件开发的基础&#xff0c;也是计算机科学教育中的一部分。本文将介绍进程和线程的概念、区别和应用。 一、什么是进程 在计算机科学中&#xff0c;进程是正在执行的程序实例。一个进程可以由一个或…...

《刀锋》读书笔记

刀锋&#xff08;毛姆长篇作品精选&#xff09;毛姆50个笔记点评认为好看的确是完美的结局。《刀锋》里面的人每个人都以自己的方式生活着。艾略特的势利&#xff0c;拉里的自由&#xff0c;伊莎贝尔的现实&#xff0c;苏珊的清醒&#xff0c;索菲的堕落&#xff0c;至于“我”…...

nginx中的ngx_modules

ngx_modules和ngx_module_names是configure脚本生成的&#xff0c;是在objs/ngx_modules.c文件中与其生成的相关的脚本文件相关的变量在options脚本中定义了objs目录的变量NGX_OBJSobjs在init脚本中定义的最终存放ngx_modules的文件 NGX_MODULES_C$NGX_OBJS/ngx_modules.c2. 处…...

设计模式之访问者模式

什么是访问者模式 访问者模式提供了一个作用于某对象结构中的各元素的操作表示&#xff0c;他使我们可以在不改变各元素的类的前提下定义作用于这些元素的新操作。     访问者模式主要包含以下几个角色&#xff1a;         Vistor(抽象访问者)&#xff1a;为对象结…...

Go项目(三)

文章目录用户微服务表结构查表web 服务跨域问题图形验证码短信用户注册服务中心注册 grpc 服务动态获取端口负载均衡配置中心启动项目小结用户微服务 作为系统的第一个微服务&#xff0c;开发的技术点前面已经了解了一遍&#xff0c;虽有待补充&#xff0c;但急需实战这里主要…...

CTK学习:(一)编译CTK

CTK插件框架简介 CTK Plugin Framework是用于C++的动态组件系统,以OSGi规范为模型。在此框架下,应用程序由不同的组件组成,遵循面向服务的方法。 ctk是一个开源项目,Github 地址:https://github.com/commontk。 源码地址commontk/CTK: A set of common support code for…...

15种NLP数据增强方法总结与对比

数据增强的方法 数据增强&#xff08;Data Augmentation&#xff0c;简称DA&#xff09;&#xff0c;是指根据现有数据&#xff0c;合成新数据的一类方法。毕竟数据才是真正的效果天花板&#xff0c;有了更多数据后可以提升效果、增强模型泛化能力、提高鲁棒性等。然而由于NLP…...

Python每日一练(20230219)

目录 1. 循环随机取数组直到得出指定数字&#xff1f; 2. 旋转链表 3. 区间和的个数 1. 循环随机取数组直到得出指定数字&#xff1f; 举个例子&#xff1a; 随机数字范围&#xff1a;0~100 每组数字量&#xff1a;6&#xff08;s1,s2,s3,s4,s5,s6&#xff09; 第二轮开始随…...

vTESTstudio - VT System CAPL Functions - VT7001

vtsSerialClose - 关闭VT系统通道的串行端口功能&#xff1a;关闭由系统变量命名空间指定的VT系统通道的串行端口。Target&#xff1a;目标通道变量空间名称&#xff0c;例如&#xff1a;VTS::ECUPowerSupply返回值&#xff1a;0&#xff1a;成功重置目标通道最大和最小值-1&am…...

「可信计算」论文初步解读

可信计算组织&#xff08;Ttrusted Computing Group,TCG&#xff09;是一个非盈利的工业标准组织&#xff0c;它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立&#xff0c;并采纳了由可信计算平台联盟&#xff08;the Trusted Computing Platform Alli…...

CSDN 算法技能树 蓝桥杯-基础 刷题+思考总结

切面条-蓝桥杯-基础-CSDN算法技能树https://edu.csdn.net/skill/algorithm/algorithm-530255df51be437b967cbc4524fe66ea?category188 目录 切面条 大衍数列 门牌制作 方阵转置 微生物增殖 成绩统计 星系炸弹 判断闰年的依据: 特别数的和 *日志统计*&#xff08;双指…...

信小程序点击按钮绘制定制转发分享图

1. 说明 先上代码片断分享链接&#xff1a; https://developers.weixin.qq.com/s/vl3ws9mA72GG 使用 painter 画图 按钮传递定制化信息 效果如下&#xff1a; 2. 关键代码说明 文件列表如下&#xff1a; {"usingComponents": {"painter": "/com…...

Python自动化测试-使用Pandas来高效处理测试数据

Python自动化测试-使用Pandas来高效处理测试数据 目录&#xff1a;导读 一、思考 二、使用pandas来操作Excel文件 三、使用pandas来操作csv文件 四、总结 一、思考 1.Pandas是什么&#xff1f; 功能极其强大的数据分析库可以高效地操作各种数据集 csv格式的文件Excel文件H…...

语音增强学习路线图Roadmap

语音增强算是比较难的研究领域&#xff0c;从入门到精通有很多台阶&#xff0c;本文介绍一些有价值的书籍&#xff0c;值得反复阅读。主要分为基础类和进阶类书籍&#xff0c;大多都是理论和实践相结合的书籍&#xff0c;编程实践是抓手,让知识和基础理论变扎实。基础书籍《信号…...

nginx配置ssl实现https访问

文章目录一、介绍二、创建证书1、OpenSSL创建自签名密钥和证书三、nginx配置四、开放端口一、介绍 nginx配置ssl证书&#xff0c;实现https访问&#xff0c;可以使用自签名SSL证书或者购买机构颁发的证书两种方式参考链接 https://blog.csdn.net/weixin_39198406/article/deta…...

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。JavaScript 语句JavaScript 语句是发给浏览器的命令。这些命令的作用是告诉浏览器要做的事情。下面的 JavaScript 语句向 id"demo" 的 HTML 元素输出文本 "Hello Dolly" &#xff1a;…...

将古老的ASP项目转换为PHP初探

ASP 是一种服务器端脚本语言&#xff0c;主要用于开发动态 Web 应用程序。ASP 可以在服务器上执行代码&#xff0c;并将结果返回给客户端浏览器&#xff0c;实现动态生成 Web 页面的功能。ASP 代码通常包含在 <% %> 标记中&#xff0c;以下是一个简单的 ASP 程序示例&…...

数据结构复习(七)模板类封装实现不带头结点的单链表

一、代码 二、总结 一、代码 #include<iostream> using namespace std;template<class T> struct ListNode {T _data;ListNode* next;ListNode(const T& data T()){_data data;next nullptr;}~ListNode(){next nullptr;} };template<class T> class…...

IDEA插件 RestfulTool插件——Restful服务开发辅助工具集

IDEA插件 RestfulTool插件——Restful服务开发辅助工具集 目录IDEA插件 RestfulTool插件——Restful服务开发辅助工具集1.插件介绍2.安装方式3.使用方法1.插件介绍 RestfulTool插件。一套 Restful 服务开发辅助工具集&#xff1a; 提供了一个 Services tree 的显示窗口 双击 …...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...