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

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&#xff1a;这是你的应用程序的状态&#xff0c;是一个响应式的对象。 Getters&#xff1a;类似于 Vuex 中的 getters&#xff0c;它们是基于 state 的计算属性。 Actions&#xff1a;类似于 Vuex 中的 mutations 和 actions&#xff0c;它们用于改变 state。但…...

【办公类-04-03】华为助手导出照片视频分类(根据图片、视频的文件名日期分类导出)

背景需求&#xff1a; 用华为手机助手导出的照片视频&#xff0c;只能将jpg照片&#xff08;exifread读取图片的exif拍摄日期&#xff0c;Png、JPEG、mp4都无法识别到exif信息&#xff09; 【办公类-04-02】华为助手导出照片&#xff08;jpg&#xff09;读取拍摄时间分类导出…...

TVBOX 最新版下载+视频源教程

下载链接 wx 搜索 Geek 前端 发送电视资源进行获取 操作教程...

2024年了,苹果可以通话录音了

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 6月11日凌晨&#xff0c;苹果在WWDC24大会上&#xff0c;密集输出了酝酿多时的AI应用更新。苹果对通话、对话、图…...

书生·浦语大模型实战营第二期作业五

1、开发机创建conda环境&#xff1a; 2、安装第三方库&#xff1a; 3、新建pipeline_transformer.py文件&#xff0c;并运行&#xff1a; 4、运行结果&#xff1a; 5、执行模型&#xff1a; 6、与大模型进行对话&#xff1a; 7、默认占有的显存&#xff1a; 8、--cache-max-en…...

树莓派4B_OpenCv学习笔记9:图片的腐蚀与膨胀

今日继续学习树莓派4B 4G&#xff1a;&#xff08;Raspberry Pi&#xff0c;简称RPi或RasPi&#xff09; 本人所用树莓派4B 装载的系统与版本如下: 版本可用命令 (lsb_release -a) 查询: Opencv 版本是4.5.1&#xff1a; 图像的膨胀与腐蚀一般用于灰度图或者二值图,今日便来学习…...

Perplexity AI — 探索网络,发掘知识,沟通思想

体验地址&#xff1a;Perplexity AI &#xff08;国外网站访问需要梯子&#xff09; Perplexity AI是一款功能强大的人工智能搜索引擎&#xff0c;其特点和优势主要体现在以下几个方面&#xff1a; 功能&#xff1a; 自然语言搜索&#xff1a;Perplexity AI可以理解用户的自然…...

RPC知识

一、为什么要有RPC&#xff1a; HTTP协议的接口&#xff0c;在接口不多、系统与系统交互较少的情况下&#xff0c;解决信息孤岛初期常使用的一种通信手段&#xff1b;优点就是简单、直接、开发方便&#xff0c;利用现成的HTTP协议进行传输。 但是&#xff0c;如果是一个大型的网…...

【爬虫】requests 结合 BeautifulSoup抓取网页数据

一、BeautifulSoup使用步骤 BeautifulSoup 是一个用于从 HTML 或 XML 文件中提取数据的 Python 库。以下是如何使用 BeautifulSoup 来解析 HTML 并提取信息的基本步骤&#xff1a; 1、安装&#xff1a; 如果你还没有安装 BeautifulSoup&#xff0c;你可以使用 pip 来安装它。…...

安全测试框架 二

使用安全测试框架进行测试&#xff0c;可以遵循以下步骤进行&#xff0c;以确保测试的全面性和系统性&#xff1a; 一、明确测试目标和需求 确定测试的范围和重点&#xff0c;明确要测试的系统或应用的安全性方面的关键点和重要性。根据业务需求和安全标准&#xff0c;制定详…...

安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易

安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易 安徽京准-NTP网络授时服务器助力助力甘南州公共资源交易 2024年5月中旬&#xff0c;我安徽京准科技生产研发的NTP时钟服务器成功投运甘南州公共资源交易中心&#xff0c;为该中心的计算机网络系统及其他各业务子系统提供…...

大数据—什么是大数据?

大数据是指所涉及的资料量规模巨大到无法透过主流软件工具&#xff0c;在合理时间内达到撷取、管理、处理、并整理成为帮助企业经营决策更积极目的的资讯。想要更加全面地了解大数据的概念&#xff0c;可以从以下几个维度进行介绍&#xff1a; 大数据的定义&#xff1a; 基本…...

德克萨斯大学奥斯汀分校自然语言处理硕士课程汉化版(第十一周) - 自然语言处理扩展研究

自然语言处理扩展研究 1. 多语言研究2. 语言锚定3. 伦理问题 1. 多语言研究 多语言(Multilinguality)是NLP的一个重要研究方向&#xff0c;旨在开发能够处理多种语言的模型和算法。由于不同语言在语法、词汇和语义结构上存在差异&#xff0c;这成为一个复杂且具有挑战性的研究…...

支持向量机(SVM)中核函数的本质意义

本质上在做什么&#xff1f; 内积是距离度量&#xff0c;核函数相当于将低维空间的距离映射到高维空间的距离&#xff0c;并非对特征直接映射。 为什么要求核函数是对称且Gram矩阵是半正定&#xff1f; 核函数对应某一特征空间的内积&#xff0c;要求①核函数对称&#xff1b;②…...

SpringBoot使用jasypt实现数据库信息的脱敏,以此来保护数据库的用户名username和密码password(容易上手,详细)

1.为什么要有这个需求&#xff1f; 一般当我们自己练习的时候&#xff0c;username和password直接是爆露出来的 假如别人路过你旁边时看到了你的数据库账号密码&#xff0c;他跑到他的电脑打开navicat直接就是一顿连接&#xff0c;直接疯狂删除你的数据库&#xff0c;那可就废…...

Python日志配置策略

1 三种情况下都能实现日志打印&#xff1a; 被库 A 调用&#xff0c;使用库 A 的日志配置。被库 B 调用&#xff0c;使用库 B 的日志配置。独立运行&#xff0c;使用自己的日志配置。 需要实现一个灵活的日志配置策略&#xff0c;使得日志记录器可以根据调用者或运行环境自动…...

想学编程,什么语言最好上手?

Python是许多初学者的首选&#xff0c;因为它的语法简洁易懂&#xff0c;而且有丰富的资源和社区支持。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频 讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;…...

binlog和redolog有什么区别

在数据库管理系统中&#xff0c;binlog&#xff08;binary log&#xff09;和 redolog&#xff08;redo log&#xff09;是两种重要的日志机制&#xff0c;它们在数据持久性和故障恢复方面扮演着关键角色。虽然它们都用于记录数据库的变化&#xff0c;但它们的目的和使用方式有…...

Linux笔记--ubuntu文件目录+命令行介绍

文件目录 命令行介绍 当我们在ubuntu中命令行处理位置输入ls后会显示出其所有目录&#xff0c;那么处理这些命令的程序就是shell&#xff0c;它负责接收用户的输入&#xff0c;并根据输入找到其他程序并运行 命令行格式 linux的命令一般由三部分组成&#xff1a;command命令、…...

71、最长上升子序列II

最长上升子序列II 题目描述 给定一个长度为N的数列&#xff0c;求数值严格单调递增的子序列的长度最长是多少。 输入格式 第一行包含整数N。 第二行包含N个整数&#xff0c;表示完整序列。 输出格式 输出一个整数&#xff0c;表示最大长度。 数据范围 1 ≤ N ≤ 100000…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

raid存储技术

1. 存储技术概念 数据存储架构是对数据存储方式、存储设备及相关组件的组织和规划&#xff0c;涵盖存储系统的布局、数据存储策略等&#xff0c;它明确数据如何存储、管理与访问&#xff0c;为数据的安全、高效使用提供支撑。 由计算机中一组存储设备、控制部件和管理信息调度的…...

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试,但是对于熟悉Java语言的开发或是测试人员,可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。 本篇快速介绍在Java Maven项目中编写和运行测试的示例。 创建Maven项目 最简单的创建项目的方式就是创建一个目录,里面…...

docker容器互联

1.docker可以通过网路访问 2.docker允许映射容器内应用的服务端口到本地宿主主机 3.互联机制实现多个容器间通过容器名来快速访问 一 、端口映射实现容器访问 1.从外部访问容器应用 我们先把之前的删掉吧&#xff08;如果不删的话&#xff0c;容器就提不起来&#xff0c;因…...