网站如何使用cdn/最新经济新闻
使用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…...

进程和线程详解
在计算机领域中,进程和线程是非常重要的概念。了解进程和线程是软件开发的基础,也是计算机科学教育中的一部分。本文将介绍进程和线程的概念、区别和应用。 一、什么是进程 在计算机科学中,进程是正在执行的程序实例。一个进程可以由一个或…...
《刀锋》读书笔记
刀锋(毛姆长篇作品精选)毛姆50个笔记点评认为好看的确是完美的结局。《刀锋》里面的人每个人都以自己的方式生活着。艾略特的势利,拉里的自由,伊莎贝尔的现实,苏珊的清醒,索菲的堕落,至于“我”…...

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

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

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

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数据增强方法总结与对比
数据增强的方法 数据增强(Data Augmentation,简称DA),是指根据现有数据,合成新数据的一类方法。毕竟数据才是真正的效果天花板,有了更多数据后可以提升效果、增强模型泛化能力、提高鲁棒性等。然而由于NLP…...

Python每日一练(20230219)
目录 1. 循环随机取数组直到得出指定数字? 2. 旋转链表 3. 区间和的个数 1. 循环随机取数组直到得出指定数字? 举个例子: 随机数字范围:0~100 每组数字量:6(s1,s2,s3,s4,s5,s6) 第二轮开始随…...

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

「可信计算」论文初步解读
可信计算组织(Ttrusted Computing Group,TCG)是一个非盈利的工业标准组织,它的宗旨是加强在相异计算机平台上的计算环境的安全性。TCG于2003年春成立,并采纳了由可信计算平台联盟(the Trusted Computing Platform Alli…...
CSDN 算法技能树 蓝桥杯-基础 刷题+思考总结
切面条-蓝桥杯-基础-CSDN算法技能树https://edu.csdn.net/skill/algorithm/algorithm-530255df51be437b967cbc4524fe66ea?category188 目录 切面条 大衍数列 门牌制作 方阵转置 微生物增殖 成绩统计 星系炸弹 判断闰年的依据: 特别数的和 *日志统计*(双指…...

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

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

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

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

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

将古老的ASP项目转换为PHP初探
ASP 是一种服务器端脚本语言,主要用于开发动态 Web 应用程序。ASP 可以在服务器上执行代码,并将结果返回给客户端浏览器,实现动态生成 Web 页面的功能。ASP 代码通常包含在 <% %> 标记中,以下是一个简单的 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 服务开发辅助工具集: 提供了一个 Services tree 的显示窗口 双击 …...

2023年全国最新会计专业技术资格精选真题及答案1
百分百题库提供会计专业技术资格考试试题、会计考试预测题、会计专业技术资格考试真题、会计证考试题库等,提供在线做题刷题,在线模拟考试,助你考试轻松过关。 11.下列各项中,影响企业利润表“利润总额”项目的是(&…...

Linux 配置RAID组
目录 配置RAID(软件RAID) 创建RAID组 RAID中出现坏盘如何操作 RAID 添加热备盘 删除RAID组 RAID所解决的问题 提升硬盘的I/O吞吐率 提高硬盘的读写能力 提高硬盘的安全性 进行备份 减少硬盘成本 RAID级别 存储RAID——RAID级别_静下心来敲木鱼的博…...

【2021/推荐/社交网络】Socially-Aware Self-Supervised Tri-Training for Recommendation
部分公式、图表和排版等显示可能异常,可在个人公众号(码农的科研笔记)进行全文免费阅读。 【2021/推荐/社交网络】Socially-Aware Self-Supervised Tri-Training for Recommendation 原文:https://dl.acm.org/doi/10.1145/3447548.3467340 源码:[伯乐 SEPT]、https://git…...

Django搭建个人博客Blog-Day06
展示所有文章Django提供的分页功能说明import os os.environ.setdefault(DJANGO_SETTINGS_MODULE, blog.settings.dev) import django django.setup() # 这个时候才有django的环境 所以导入django中的模块必须写在这句话的后面才有效 from articles.models import Articles #…...

DQL 多表查询
1、多表关系 一对多(多对一) 案例: 部门 与 员工的关系 关系: 一个部门对应多个员工,一个员工对应一个部门 实现: 在从表的一方建立外键,指向主表一方的主键 多对多 案例: 学生 与 课程的关系 关系: 一个学生可以选修多门课程&am…...

BUUCTF Reverse xor
题目:BUUCTF Reverse xor 一些犯傻后学到了新东西的记录 查壳,没壳,IDA打开 main函数很好理解,输入一个长度为33的字符串,1-32位与前一位异或后与global相等,则判定flag正确 找global 在strings window直…...

vite和esbuild/roolup的优缺点
esbuild 优点 基于go语言,go是纯机器码不使用 AST,优化了构建流程多线程并行 缺点 esbuild 没有提供 AST 的操作能力。所以一些通过 AST 处理代码的 babel-plugin 没有很好的方法过渡到 esbuild 中(比如babel-plugin-import)。…...

32-Golang中的map
Golang中的map基本介绍基本语法map声明的举例map使用的方式map的增删改查操作map的增加和更新map的删除map的查找map的遍历map切片基本介绍map排序map的使用细节基本介绍 map是key-value数据结构,又称为字段或者关联数组。类似其它编程语言的集合,在编程…...

LeetCode-384-打乱数组
1、列表随机 为了能够初始化数组,我们使用nums保存当前的数组,利用orignal保存初始化数组。为了实现等可能随机打乱,考虑到随机数本质上是基于随机数种子的伪随机,我们采用如下的方式实现等可能随机:我们将所有元素压…...

九龙证券|重大利好!期货公司打新再“解绑”:可直接参与首发网下配售!
时隔近7年,期货公司及其财物办理子公司参加首发证券网下询价和配售事务再次“解绑”。 2月17日,为适应全面实行股票发行注册制变革需求,中国证券业协会(以下简称中证协)发布《初次公开发行证券网下出资者办理规矩》&am…...