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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/27435.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AI图书下载:《ChatGPT打造赚钱机器》

这本书《ChatGPT打造赚钱机器》&#xff08;ChatGPT Money Machine 2024 The Ultimate Chatbot Cheat Sheet&#xff09;是一本全面的指南&#xff0c;旨在帮助读者快速掌握如何利用ChatGPT等人工智能技术创造收益。 以下是各章节内容的总结&#xff1a; **引言** 介绍了人工智…

AI模型部署:Triton+TensorRT部署Bert文本向量化服务实践

前言 本篇介绍以Triton作为推理服务器&#xff0c;TensorRT作为推理后端&#xff0c;部署句嵌入向量模型m3e-base的工程方案和实现&#xff0c;句嵌入模型本质上是Bert结构&#xff0c;本案例可以推广到更一般的深度学习模型部署场景。 内容摘要 推理服务器和推理后端介绍Ten…

个人关于vuex的见解

前言 vuex是什么&#xff1f; Vuex 是 Vue.js 的官方状态管理库&#xff0c;专为 Vue.js 应用程序设计&#xff0c;用于在复杂的前端应用中集中管理状态。 Vuex 的重要性 集中管理&#xff1a;统一存储应用状态&#xff0c;简化复杂应用的状态逻辑。响应式更新&#xff1a;…

PostgreSQL下载地址

下载地址&#xff1a;PostgreSQL: File Browser

AI实践与学习6-RAG流程优化学习

背景 RAG流程很多细节优化点&#xff0c;助力AIGC。 内容 LangChain在RAG功能上的一些能力 多路向量检索 多向量检索器的核心想法是将我们想要用于答案合成的文档与我们想要用于检索的参考文献分开。这允许系统为搜索优化文档的版本&#xff08;例如&#xff0c;摘要&…

欣九康诊疗系统让中医诊所创收不再难

近些年由于国家对中医药的支持政策不断地在推进落实&#xff0c;所以导致中医馆、中医诊所越开越多&#xff0c;再加上各行各业都在向数字化转型&#xff0c;也给中医诊所带来了冲击&#xff0c;所以如何平衡机遇与竞争&#xff0c;实现诊所创收便成了每位中医诊所的负责人所必…

牛客链表刷题(二)

目录 题目一&#xff1a;合并两个有序链表 代码&#xff1a; 题目二&#xff1a;合并k个有序链表 代码&#xff1a; 题目三&#xff1a;判断链表中是否有环 代码&#xff1a; 题目四&#xff1a;链表中环的入口结点 代码&#xff1a; 题目一&#xff1a;合并两个有序链表 代…

Redis专题----2

一.主从复制 从服务器连接主服务器,发送SYNC命令.主服务器接收到SYNC命令后,执行命令生成RDB文件并使用缓冲区记录此后执行的所有写命令.主服务器执行完后,向所有的从服务器发送快照文件,并在发送期间继续记录被执行的写命令.从服务器收到快照文件后丢弃所有的旧数据,载入收到的…

卫星通讯助力船舶可视化监控:EasyCVR视频汇聚系统新应用

一、背景 随着科技的不断进步和社会治安的日益严峻&#xff0c;视频监控系统已经成为维护公共安全和提升管理效率的重要工具。传统的视频监控主要依赖于有线传输&#xff0c;但受到地域限制、布线成本高等因素的影响&#xff0c;其应用范围和效果受到一定限制。而卫星通讯传输…

CentOS 7 下gdb任意版本的升级

文章目录 前言查看gdb版本升级步骤 小结 前言 在做项目的过程中&#xff0c;遇到了难缠的bug&#xff0c;使用gdb调试的时候&#xff0c;bt调用堆栈看的一震头疼&#xff0c;于是就想起把gdb升级一下 当前环境&#xff1a;Centos7&#xff0c;gdb&#xff1a;7.6 稍微好看了那…

提醒:网站使用微软雅黑字体的三种方式,两种侵权,一种不侵权。

大家都知道微软雅黑是windows系统的默认字体&#xff0c;但是不知道微软雅黑的版权归属方正字体&#xff0c;而且方正字体仅仅授权了微软在windows系统中使用该字体&#xff0c;脱离了windows使用&#xff0c;那是极易中招的&#xff0c;网页字体使用是前端开发的工作之一&…

Makefile-快速掌握

引用 本文完全参照大佬的文档写的&#xff0c;写这篇文章只是为了梳理一下知识 https://github.com/marmotedu/geekbang-go/blob/master/makefile/Makefile%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.md 介绍 Makefile是一个工程文件的编译规则&#xff0c;描述了整个工程的编译…

Netflix 机器学习科学家的提示词优化经验分享

编者按&#xff1a; 如何充分发挥大模型的潜能&#xff0c;用好大模型&#xff0c;关键在于如何优化向它们发送的提示词&#xff08;prompt&#xff09;&#xff0c;是为提示词工程&#xff08;prompt engineering&#xff09;。 本文Netflix 机器学习科学家Cameron R. Wolfe的…

SwiGLU激活函数与GLU门控线性单元原理解析

前言 SwiGLU激活函数在PaLM&#xff0c;LLaMA等大模型中有广泛应用&#xff0c;在大部分测评中相较于Transformer FFN中所使用的ReLU函数都有提升。本篇先介绍LLaMA中SwiGLU的实现形式&#xff0c;再追溯到GLU门控线性单元&#xff0c;以及介绍GLU的变种&#xff0c;Swish激活…

分布式技术导论 — 探索分析从起源到现今的巅峰之旅(逻辑架构)

探索分析从起源到现今的巅峰之旅 背景介绍技术系列 逻辑架构连接处理层数据缓存层SQL处理层存储引擎逻辑层次的分工 模块执行连接处理层初始化模块核心API模块网络交互模块Client&Server 交互协议模块用户模块案例 访问控制模块案例 连接管理、连接线程和线程管理连接管理模…

学习资料分析

学习资料分析 速算运算 √截位直除分数比较等比修正其他速算方法基期与现期基本概念求基期求现期增长率与增长量增长相关统计术语求一般增长率比较一般增长率增长量比重比重相关公式求比重平均数倍数间隔增长乘积增长率年增长率混合增长率资料分析:主要测查报考者对文字、数字…

UML与设计模式

1、关联关系 关联关系用于描述不同类的对象之间的结构关系&#xff0c;它在一段时间内将多个类的实例连接在一起。关联关系是一种静态关系&#xff0c;通常与运行状态无关&#xff0c;而是由“常识”、“规则”、“法律”等因素决定的&#xff0c;因此关联关系是一种强关联的关…

Web前端开发模板:创新实践与深度解析

Web前端开发模板&#xff1a;创新实践与深度解析 在数字化时代的浪潮中&#xff0c;Web前端开发作为构建用户界面的关键环节&#xff0c;其重要性日益凸显。一个优秀的Web前端模板不仅能够提升用户体验&#xff0c;还能有效推动项目的快速开发与部署。本文将从四个方面、五个方…

媒体查询的屏幕尺寸范围

在响应式网站设计中&#xff0c;媒体查询通常用于根据不同的屏幕尺寸应用不同的样式规则。以下是一些常见的屏幕尺寸范围&#xff0c;这些范围可以用于定义大屏幕、中屏幕、小屏幕和超小屏幕设备的样式。这些范围广泛参考了 Bootstrap 框架的断点&#xff0c;因为它是一个广泛使…

层出不穷的大模型产品:使用体验、倾向选择及未来展望

✨作者主页&#xff1a; Mr.Zwq✔️个人简介&#xff1a;一个正在努力学技术的Python领域创作者&#xff0c;擅长爬虫&#xff0c;逆向&#xff0c;全栈方向&#xff0c;专注基础和实战分享&#xff0c;欢迎咨询&#xff01; 您的点赞、关注、收藏、评论&#xff0c;是对我最大…