Vue3 之 Pinia 核心概念(八)
核心概念
State:这是你的应用程序的状态,是一个响应式的对象。
Getters:类似于 Vuex 中的 getters,它们是基于 state 的计算属性。
Actions:类似于 Vuex 中的 mutations 和 actions,它们用于改变 state。但与 Vuex 不同的是,在 Pinia 中,mutations 和 actions 被合并为一个概念,即 actions。
其他特性:Pinia 还支持插件、热重载、服务器端渲染等。
安装
npm install pinia
# 或者使用 yarn
yarn add pinia
main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue' const app = createApp(App)
const pinia = createPinia() app.use(pinia)
app.mount('#app')
store/counter.js
import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { // state state: () => ({ count: 0, }), // getters getters: { doubleCount: (state) => state.count * 2, }, // actions actions: { increment() { this.count++ }, decrement() { this.count-- }, // 你也可以在 actions 中使用其他 actions 或 getters incrementBy(amount) { this.count += amount }, },
})
App.vue
<template> <div> <p>Count: {{ counterStore.count }}</p> <p>Double Count: {{ counterStore.doubleCount }}</p> <button @click="counterStore.increment">Increment</button> <button @click="counterStore.decrement">Decrement</button> <button @click="counterStore.incrementBy(5)">Increment by 5</button> </div>
</template> <script>
import { useCounterStore } from './store/counter' export default { setup() { const counterStore = useCounterStore() return { counterStore } },
}
</script>
扩展 Store
由于有了底层 API 的支持,Pinia store 现在完全支持扩展。以下是你可以扩展的内容:
为 store 添加新的属性
定义 store 时增加新的选项
为 store 增加新的方法
包装现有的方法
改变甚至取消 action
实现副作用,如本地存储
仅应用插件于特定 store
1. 插件 (Plugins)
插件是通过 pinia.use() 添加到 pinia 实例的。最简单的例子是通过返回一个对象将一个静态属性添加到所有 store。
import { createPinia } from 'pinia'// 创建的每个 store 中都会添加一个名为 `secret` 的属性。
// 在安装此插件后,插件可以保存在不同的文件中
function SecretPiniaPlugin() {return { secret: 'the cake is a lie' }
}const pinia = createPinia()
// 将该插件交给 Pinia
pinia.use(SecretPiniaPlugin)// 在另一个文件中
const store = useStore()
store.secret // 'the cake is a lie'
2. 持久化状态 (Persistence)
代码示例(使用第三方插件 pinia-plugin-persistedstate):
npm install pinia-plugin-persistedstate
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import createPersistedState from 'pinia-plugin-persistedstate'; const pinia = createPinia(); // 使用插件
pinia.use(createPersistedState({ storage: window.localStorage,
})); const app = createApp(/* ... */);
app.use(pinia);
// ...
3. 订阅状态变化 (Subscribing to State Changes)
Pinia 允许你订阅 Store 的状态变化,以便在状态更新时执行某些操作。这可以通过 pinia.state.subscribe 方法实现。
代码示例(在插件中使用):
// 插件中的代码
app.pinia.state.subscribe((mutation, state) => { // mutation 是一个对象,包含 type('direct' 或 'patch')和 key // state 是 Store 的当前状态 console.log('State mutated:', mutation, state);
});
4. 使用 TypeScript 进行类型安全
如果你在使用 TypeScript,Pinia 提供了强大的类型支持,确保你的代码是类型安全的。你可以为 state、getters 和 actions 提供类型定义。
代码示例(使用 TypeScript):
import { defineStore } from 'pinia'; interface CounterState { count: number;
} export const useCounterStore = defineStore('counter', { state: (): CounterState => ({ count: 0, }), // ...
});
5. 访问其他 Store
在 Pinia 中,一个 Store 可以很容易地访问另一个 Store 的状态和方法。你可以直接在 Store 的 actions 中使用 useStore 函数来访问其他 Store。
代码示例:
import { defineStore } from 'pinia';
import { useOtherStore } from './otherStore'; export const useCounterStore = defineStore('counter', { // ... actions: { incrementAndDoSomethingElse() { this.count++; const otherStore = useOtherStore(); otherStore.doSomething(); }, },
});
在组件外部使用 Store
1. 创建 Pinia 实例和 Store
首先,你需要在你的主入口文件(如 main.js 或 main.ts)中创建 Pinia 实例,并使用它创建你的 Store。
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue' const app = createApp(App)
const pinia = createPinia() // 使用 Pinia
app.use(pinia) // 挂载应用
app.mount('#app') // 假设你有一个名为 useCounterStore 的 Store
// import { useCounterStore } from './stores/counter'
// 但在这里我们不会直接在 main.js 中使用它
2. 在组件外部使用 Store
示例:在路由守卫中使用 Store
假设你有一个名为 useUserStore 的 Store,用于管理用户状态,并且你想在路由守卫中检查用户是否已登录。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from './stores/user' // 假设你的 Store 在这里
import pinia from '../main' // 引入 Pinia 实例(你可能需要根据你的项目结构来调整这个路径) const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [ // ...你的路由配置 ],
}) // 在路由守卫中使用 Store
router.beforeEach((to, from, next) => { // 使用 pinia.useStore() 获取 Store 实例 const userStore = pinia.useUserStore() // 假设有一个 isLoggedIn 的 getter 或 state 属性 if (to.meta.requiresAuth && !userStore.isLoggedIn) { // 重定向到登录页面或执行其他操作 next('/login') } else { next() }
}) export default router
相关文章:
Vue3 之 Pinia 核心概念(八)
核心概念 State:这是你的应用程序的状态,是一个响应式的对象。 Getters:类似于 Vuex 中的 getters,它们是基于 state 的计算属性。 Actions:类似于 Vuex 中的 mutations 和 actions,它们用于改变 state。但…...
【办公类-04-03】华为助手导出照片视频分类(根据图片、视频的文件名日期分类导出)
背景需求: 用华为手机助手导出的照片视频,只能将jpg照片(exifread读取图片的exif拍摄日期,Png、JPEG、mp4都无法识别到exif信息) 【办公类-04-02】华为助手导出照片(jpg)读取拍摄时间分类导出…...
TVBOX 最新版下载+视频源教程
下载链接 wx 搜索 Geek 前端 发送电视资源进行获取 操作教程...
2024年了,苹果可以通话录音了
人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 6月11日凌晨,苹果在WWDC24大会上,密集输出了酝酿多时的AI应用更新。苹果对通话、对话、图…...
书生·浦语大模型实战营第二期作业五
1、开发机创建conda环境: 2、安装第三方库: 3、新建pipeline_transformer.py文件,并运行: 4、运行结果: 5、执行模型: 6、与大模型进行对话: 7、默认占有的显存: 8、--cache-max-en…...
树莓派4B_OpenCv学习笔记9:图片的腐蚀与膨胀
今日继续学习树莓派4B 4G:(Raspberry Pi,简称RPi或RasPi) 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1: 图像的膨胀与腐蚀一般用于灰度图或者二值图,今日便来学习…...
Perplexity AI — 探索网络,发掘知识,沟通思想
体验地址:Perplexity AI (国外网站访问需要梯子) Perplexity AI是一款功能强大的人工智能搜索引擎,其特点和优势主要体现在以下几个方面: 功能: 自然语言搜索:Perplexity AI可以理解用户的自然…...
RPC知识
一、为什么要有RPC: HTTP协议的接口,在接口不多、系统与系统交互较少的情况下,解决信息孤岛初期常使用的一种通信手段;优点就是简单、直接、开发方便,利用现成的HTTP协议进行传输。 但是,如果是一个大型的网…...
【爬虫】requests 结合 BeautifulSoup抓取网页数据
一、BeautifulSoup使用步骤 BeautifulSoup 是一个用于从 HTML 或 XML 文件中提取数据的 Python 库。以下是如何使用 BeautifulSoup 来解析 HTML 并提取信息的基本步骤: 1、安装: 如果你还没有安装 BeautifulSoup,你可以使用 pip 来安装它。…...
安全测试框架 二
使用安全测试框架进行测试,可以遵循以下步骤进行,以确保测试的全面性和系统性: 一、明确测试目标和需求 确定测试的范围和重点,明确要测试的系统或应用的安全性方面的关键点和重要性。根据业务需求和安全标准,制定详…...
安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易
安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易 安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易 2024年5月中旬,我安徽京准科技生产研发的NTP时钟服务器成功投运甘南州公共资源交易中心,为该中心的计算机网络系统及其他各业务子系统提供…...
大数据—什么是大数据?
大数据是指所涉及的资料量规模巨大到无法透过主流软件工具,在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。想要更加全面地了解大数据的概念,可以从以下几个维度进行介绍: 大数据的定义: 基本…...
德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第十一周) - 自然语言处理扩展研究
自然语言处理扩展研究 1. 多语言研究2. 语言锚定3. 伦理问题 1. 多语言研究 多语言(Multilinguality)是NLP的一个重要研究方向,旨在开发能够处理多种语言的模型和算法。由于不同语言在语法、词汇和语义结构上存在差异,这成为一个复杂且具有挑战性的研究…...
支持向量机(SVM)中核函数的本质意义
本质上在做什么? 内积是距离度量,核函数相当于将低维空间的距离映射到高维空间的距离,并非对特征直接映射。 为什么要求核函数是对称且Gram矩阵是半正定? 核函数对应某一特征空间的内积,要求①核函数对称;②…...
SpringBoot使用jasypt实现数据库信息的脱敏,以此来保护数据库的用户名username和密码password(容易上手,详细)
1.为什么要有这个需求? 一般当我们自己练习的时候,username和password直接是爆露出来的 假如别人路过你旁边时看到了你的数据库账号密码,他跑到他的电脑打开navicat直接就是一顿连接,直接疯狂删除你的数据库,那可就废…...
Python日志配置策略
1 三种情况下都能实现日志打印: 被库 A 调用,使用库 A 的日志配置。被库 B 调用,使用库 B 的日志配置。独立运行,使用自己的日志配置。 需要实现一个灵活的日志配置策略,使得日志记录器可以根据调用者或运行环境自动…...
想学编程,什么语言最好上手?
Python是许多初学者的首选,因为它的语法简洁易懂,而且有丰富的资源和社区支持。我这里有一套编程入门教程,不仅包含了详细的视频 讲解,项目实战。如果你渴望学习编程,不妨点个关注,给个评论222,…...
binlog和redolog有什么区别
在数据库管理系统中,binlog(binary log)和 redolog(redo log)是两种重要的日志机制,它们在数据持久性和故障恢复方面扮演着关键角色。虽然它们都用于记录数据库的变化,但它们的目的和使用方式有…...
Linux笔记--ubuntu文件目录+命令行介绍
文件目录 命令行介绍 当我们在ubuntu中命令行处理位置输入ls后会显示出其所有目录,那么处理这些命令的程序就是shell,它负责接收用户的输入,并根据输入找到其他程序并运行 命令行格式 linux的命令一般由三部分组成:command命令、…...
71、最长上升子序列II
最长上升子序列II 题目描述 给定一个长度为N的数列,求数值严格单调递增的子序列的长度最长是多少。 输入格式 第一行包含整数N。 第二行包含N个整数,表示完整序列。 输出格式 输出一个整数,表示最大长度。 数据范围 1 ≤ N ≤ 100000…...
科研党福音!爱毕业aibye力荐6大AI论文平台,智能改写+降重功能全解析。
工具名称 核心功能 特色优势 Aibiye 论文生成降AI率 全学科覆盖、仿写优化、自动图表生成 Aicheck AI检测文献综述辅助 精准查新、3分钟高效成文 GPT学术版 润色/翻译/代码解释 多模型协同、PDF深度解析 摆平论文 大纲生成降重改写 三步出稿、本硕博通用 QuillB…...
MedGemma 1。5在Linux环境下的部署与优化
MedGemma 1.5在Linux环境下的部署与优化 1. 引言 MedGemma 1.5是谷歌最新发布的开源医疗AI模型,专门针对医学影像和文本数据处理进行了深度优化。这个40亿参数的轻量级模型不仅能处理CT、MRI等三维医学影像,还能分析病理切片和电子健康记录,…...
毫米波雷达测速的“火眼金睛”:从汽车ACC到手势识别,Doppler FFT如何分辨不同速度的目标?
毫米波雷达测速的“火眼金睛”:从汽车ACC到手势识别,Doppler FFT如何分辨不同速度的目标? 在自动驾驶汽车的前方,一辆卡车突然减速,而右侧车道有摩托车正在加速超车——毫米波雷达如何在这复杂的场景中,准确…...
StarWind V2V Image Converter实战:轻松将IMG镜像转换为VMware VMDK格式
1. 为什么需要IMG转VMDK? 虚拟机镜像格式转换是IT运维中的常见需求。我遇到过不少这样的情况:手头有一个现成的IMG格式镜像文件,但当前虚拟化环境用的是VMware。这时候就需要把IMG转换成VMware原生支持的VMDK格式。 IMG是一种通用的磁盘镜像格…...
多层PCB结构与设计技术详解
多层PCB内部结构解析与设计指南1. 多层PCB概述1.1 多层PCB的基本概念现代电子设备对电路板的要求越来越高,多层PCB已成为复杂电子系统的标准配置。与单层或双层PCB相比,多层PCB通过在绝缘基材上叠加多个导电层,实现了更高的布线密度和更优的信…...
3步实现跨次元游戏模组管理:XXMI启动器的多游戏统一解决方案
3步实现跨次元游戏模组管理:XXMI启动器的多游戏统一解决方案 【免费下载链接】XXMI-Launcher Modding platform for GI, HSR, WW and ZZZ 项目地址: https://gitcode.com/gh_mirrors/xx/XXMI-Launcher 还在为《原神》《崩坏:星穹铁道》等多款二次…...
gte-base-zh场景应用:电商搜索与客服问答的语义匹配实战
gte-base-zh场景应用:电商搜索与客服问答的语义匹配实战 1. 电商场景中的语义匹配挑战 1.1 搜索不精准的痛点分析 在电商平台上,用户搜索"苹果手机"却看到水果苹果的图片,或者输入"轻薄笔记本"却返回游戏本࿰…...
达摩院PALM春联模型多场景落地:政务大厅自助春联机解决方案
达摩院PALM春联模型多场景落地:政务大厅自助春联机解决方案 春节贴春联,是咱们中国人传承千年的文化习俗。一副好春联,不仅承载着对新年的美好祝愿,也体现着家庭的品味和格调。但你知道吗?现在写春联这件事࿰…...
2026权威评测:盘点毕业论文AIGC免费降重神器
【CSDN 资深算法架构师 / NLP技术专栏 导读】 各位还在发际线边缘挣扎的应届生和硕博党们,到了2026年,如果你的电脑里还装着那种老掉牙的“同义词替换”降重软件,我劝你赶紧停手! 最近CSDN社群里哀嚎一片:“知网查重过…...
OpenClaw+GLM-4.7-Flash:智能读书笔记生成
OpenClawGLM-4.7-Flash:智能读书笔记生成 1. 为什么需要自动化读书笔记 作为一名技术从业者,我常年保持每周至少阅读两本专业书籍的习惯。但最困扰我的不是阅读本身,而是如何高效整理书中精华内容。过去我尝试过各种笔记工具,从…...
