vue之Pinia
定义 Store | Pinia
开发文档
1.什么是Pinaia
Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。
2.理解Pinaia核心概念
定义Store
在深入研究核心概念之前,我们得知道 Store 是用
defineStore()
定义的,它的第一个参数要求是一个独一无二的名字:import { defineStore } from 'pinia'// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`,`useCartStore`,`useProductStore`) // 第一个参数是你的应用中 Store 的唯一 ID。 export const useAlertsStore = defineStore('alerts', {// 其他配置... })
这个名字 ,也被用作 id ,是必须传入的, Pinia 将用它来连接 store 和 devtools。为了养成习惯性的用法,将返回的函数命名为 use... 是一个符合组合式函数风格的约定。
defineStore()
的第二个参数可接受两类值:Setup 函数或 Option 对象。、在 Setup Store 中:
ref()
就是state
属性computed()
就是getters
function()
就是actions
使用Store
虽然我们前面定义了一个 store,但在我们使用
<script setup>
调用useStore()
(或者使用setup()
函数,像所有的组件那样) 之前,store 实例是不会被创建的<script setup> import { useCounterStore } from '@/stores/counter' // 可以在组件中的任意位置访问 `store` 变量 ✨ const store = useCounterStore() </script>
3.状态持久化
方法一 整体添加
main.ts入口文件添加整体持久化方案
import {createPinia} from 'pinia' const pinia = createPinia() if(localStorage.getItem("pinia")){ pinia.state.value = JSON.parse(localStorage.getItem("pinia")) } watch(pinia.state,state=>{ localStorage.setItem("pinia",JSON.stringify(state)) },{deep:true}) app.use(pinia)
方法二 插件
npm i pinia-plugin-persistedstate --save
import {createPinia} from 'pinia' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' const pinia = createPinia() pinia.use(piniaPluginPersistedstate) app.use(pinia) import {ref, computed, watch} from 'vue' import {defineStore} from 'pinia' //counter是状态库id 或名称 export const useCounterStore = defineStore('counter', () => { //变量 state const count = ref(0) //计算属性 getter const doubleCount = computed(() => count.value * 2) //方法action function increment() { count.value++ } const user = ref({ name: '', desc: '一键三连' }) return {count, doubleCount, increment} }, {persist: true})
结果添加 ,{persist: true} 就可以持久化了
Pinanad的使用
components/Aa.vue 组件
components/Bb.vue组件
stores/counter.js 选项式的用法
stores/ token.js 组合式写法
main.js
import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) import { createPinia } from 'pinia' app.use(createPinia()) app.mount('#app')
App.vue
<script setup> import {version as v1, ref} from 'vue' import Bb from "@/components/Bb.vue"; import Aa from "@/components/Aa.vue"; const v2 = ref('2.1.6') import {useCounterStore} from './stores/counter' const c = useCounterStore() import {useTokenStore} from './stores/token' const us = useTokenStore() </script><template>{{ v1 }} {{ v2 }}<h1>App</h1><button @click="us.count++">add</button><button @click="us.increment()">increment</button><button @click="c.count++">add</button><button @click="c.increment()">increment</button><p>{{us.count}} ---{{us.doubleCount}}</p><hr><p>{{ c.count }} -- {{ c.doubleCount }}</p><p>{{}}</p><h1>Aa组件</h1><Aa/><h1>BB组件</h1><Bb/></template><style scoped></style>
count.js
import {computed, ref, watch} from 'vue' import {defineStore} from 'pinia' export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return {count, doubleCount, increment} })
token.js
import {defineStore} from 'pinia'export const useTokenStore = defineStore('token', {state: () => {return {count: 0,}},getters: {doubleCount: state => state.count * 2},actions: {increment() {this.count++}}, })
Aa.vue
<script setup> import {useCounterStore} from '../stores/counter.js'const cc = useCounterStore()import {useTokenStore} from '../stores/token'const us = useTokenStore()</script><template><h1>Aaaaaa</h1><p>Aaa : {{ cc.count }} -- {{ cc.doubleCount }}</p><button @click="cc.count+=5">Aa add +=5</button><p>Aaa : {{ us.count }} -- {{ us.doubleCount }}</p><button @click="us.count+=5">Aa add +=5</button> </template><style scoped></style>
Ba.vue
<script setup> import {useCounterStore} from '../stores/counter.js' const cc = useCounterStore() </script><template> <h1>Bb</h1> <p>Bb : {{cc.count}} -- {{cc.doubleCount}}</p> </template><style scoped></style>
相关文章:
vue之Pinia
定义 Store | Pinia 开发文档 1.什么是Pinaia Pinia 是 Vue 的专属状态管理库,它允许你跨组件或页面共享状态。 2.理解Pinaia核心概念 定义Store 在深入研究核心概念之前,我们得知道 Store 是用 defineStore() 定义的,它的第一个参数要求是一…...

antd-vue 级联选择器默认值不生效解决方案
一、业务场景: 最近在使用Vue框架和antd-vue组件库的时候,发现在做编辑回显时** 级联选择器** 组件的默认值不生效。为了大家后面遇到和我一样的问题,给大家分享一下 二、bug信息: 三、问题原因: 确定不了唯一的值&a…...

分享53个Python源码源代码总有一个是你想要的
分享53个Python源码源代码总有一个是你想要的 链接:https://pan.baidu.com/s/1ew3w2_DXlSBrK7Mybx3Ttg?pwd8888 提取码:8888 项目名称 100-Python ControlXiaomiDevices DRF-ADMIN 后台管理系统 FishC-Python3小甲鱼 Flask框架的api项目脚手架 …...

【每日一题】658. 找到 K 个最接近的元素
658. 找到 K 个最接近的元素 - 力扣(LeetCode) 给定一个 排序好 的数组 arr ,两个整数 k 和 x ,从数组中找到最靠近 x(两数之差最小)的 k 个数。返回的结果必须要是按升序排好的。 整数 a 比整数 b 更接近 …...
并发任务队列(字节青训测试题)
需求描述 封装一个并发任务队列类,用于对一些异步任务按指定的并发数量进行并发执行。 /*** 延迟函数* param {number} time - 延迟时间* return {Promise} delayFn - 延迟函数(异步封装)*/ function timeout(time) {return new Promise((resolve) > {setTimeo…...

Ubuntu 安装Nacos
1、官网下载最新版nacos https://github.com/alibaba/nacos/releases 本人环境JDK8,Maven3.6.3,启动Nacos2.2.1启动失败,故切换到2.1.0启动成功 2、放到服务器目录下,我的在/home/xxx/apps下 3、解压 $ tar -zxvf nacos-serve…...
CSS 小球随着椭圆移动
html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><…...

【李沐深度学习笔记】线性代数
课程地址和说明 线性代数p1 本系列文章是我学习李沐老师深度学习系列课程的学习笔记,可能会对李沐老师上课没讲到的进行补充。 线性代数 标量 标量(scalar),亦称“无向量”。有些物理量,只具有数值大小,…...

vuejs - - - - - 递归组件的实现
递归组件的实现 1. 需求描述:2. 效果图:3. 代码3.1 封装组件代码3.2 父组件使用 1. 需求描述: 点击添加行,增加一级目录结构当类型为object or array时,点击右侧➕,增加子集点击右侧🚮&#x…...

精准对接促合作:飞讯受邀参加市工信局举办的企业供需对接会
2023年9月21日,由惠州市工业和信息化局主办的惠州市工业软件企业与制造业企业供需对接会成功举办,对接会旨在促进本地工业软件企业与制造业企业的紧密合作,推动数字化转型的深入发展。此次会议在市工业和信息化局16楼会议室举行,会…...
数学建模之遗传算法
文章目录 前言遗传算法算法思想生物的表示初始种群的生成下一代种群的产生适应度函数轮盘赌交配变异混合产生新种群 停止迭代的条件遗传算法在01背包中的应用01背包问题介绍01背包的其它解法01背包的遗传算法解法生物的表示初始种群的生成下一代种群的产生适应度函数轮盘赌交配…...
ISO9001认证常见的不符合项
今天,整理了一些关于ISO9001质量管理体系审核最常见的不合格项,以供大家参考。 一、质量管理体系 1、质量手册(标准条款4.2.2) (1)各部门执行的文件与手册的规定不一致。 (2)质量…...

crypto:看我回旋踢
题目 下载压缩包后解压可得到提示文本 经过观察,synt{}这个提示与flag{}形式很像 由题目名中的回旋可以推测为凯撒密码,由凯撒密码的定义可知,需要先推出移位数,s->f数13次,因此移位数为13,解码可得...

Springcloud实战之自研分布式id生成器
一,背景 日常开发中,我们需要对系统中的各种数据使用 ID 唯一表示,比如用户 ID 对应且仅对应一个人,商品 ID 对应且仅对应一件商品,订单 ID 对应且仅对应 一个订单。我们现实生活中也有各种 ID ,比如身…...

java 企业工程管理系统软件源码 自主研发 工程行业适用
工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&am…...

Spring Cloud Alibaba Nacos 2.2.3 (4) - 本地源码编译 调试
下载nacos nacos在GitHub上有下载地址:https://github.com/alibaba/nacos/releases,可以选择任意版本下载。 我下载的是2.2.3 版本 导入idea mvn 安装包 1,切换到Terminal ,并且使用command prompt模式 2,执行 mvn -Prelease…...

WKB近似
WKB方法用于研究一种特定类型的微分方程的全局性质 很有用这种特定的微分方程形如: 经过一些不是特别复杂的推导,我们可以得到他的WKB近似解。 该近似解的选择取决于函数和参数的性质同时,我们默认函数的定义域为当恒大于零,时: 当…...

LeetCode算法二叉树—108. 将有序数组转换为二叉搜索树
目录 108. 将有序数组转换为二叉搜索树 代码: 运行结果: 给你一个整数数组 nums ,其中元素已经按 升序 排列,请你将其转换为一棵 高度平衡 二叉搜索树。 高度平衡 二叉树是一棵满足「每个节点的左右两个子树的高度差的绝对值不…...
如何设置 Git 短命令
设置 Git 短命令 对喜欢敲命令而不用图形化工具的爱好者来说,设置短命令可以很好的提高效率。下面介绍两种设置短命令的方式。 方式一 git config --global alias.ps push方式二 打开全局配置文件 vim ~/.gitconfig写入内容 [alias] co checkoutps pushpl p…...

virtualbox无界面打开linux虚拟机的bat脚本,以及idea(代替Xshell)连接linux虚拟机的方法
virtualbox无界面打开linux虚拟机的bat脚本,以及idea连接linux虚拟机的方法 命令行运行代码成功运行的效果图 idea连接linux虚拟机的方法【重要】查看虚拟机的IP地址idea中选择菜单(该功能可代替Xshell软件)配置设置连接成功进入idea中的命令…...

JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...
ffmpeg(四):滤镜命令
FFmpeg 的滤镜命令是用于音视频处理中的强大工具,可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下: ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜: ffmpeg…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...

初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

七、数据库的完整性
七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

GruntJS-前端自动化任务运行器从入门到实战
Grunt 完全指南:从入门到实战 一、Grunt 是什么? Grunt是一个基于 Node.js 的前端自动化任务运行器,主要用于自动化执行项目开发中重复性高的任务,例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...