《Vue3 基础知识》Pinia 01 之 基础

Pinia 基础知识

前言

说明

  • 本篇更倾向于 选项式 API 写法,因为项目是从 Vue2 升级至 Vue3,为更好且快速适配;
  • Vue2 中,Vuex3Pinia 不能一起使用。因为 Pinia 使用的是 Vuex3 现有接口;
  • Vue3 中,Vuex4Pinia 可以一起使用;

与 Vuex 的差异

  • 参考 从 Vuex ≤4 迁移;
  • Pinia 废弃 mutation

Store/Pinia 是什么

  • 承载着全局状态;
  • 一个保存状态和业务逻辑的实体,它并不与你的组件树绑定;
  • 可理解为一个永远存在的组件,每个组件都可以读取和写入它;
  • 三个概念:state, getter, action ,可理解为组件中的 data, computed, methods
  • store 是一个用 reactive 包装的对象,不用在 getter 后面写 .value
  • store 不能解构,否则失去响应性。使用 storeToRefs() 解构可保持响应性;
<script setup>
import { storeToRefs } from 'pinia'const store useCounterStore()const { name, doubleCount } = storeToRefs(store)
</script>

核心概念

定义 Store

  • 使用 defineStore 定义,变量名建议以 use 开头且以 Store 结尾,例如:useUserStore
  • 第一个参数要求 独一无二 ,且必传。它用来连接 store 和 devtools;
  • 第二个参数可接受两种类值:Setup 函数或 Option 对象。具体参考此处;
import { defineStore } from 'pinia'export const useUserStore = defineStore('user', {// ...
})

State

  • statestore 的核心;
  • state 被定义为一个返回初始化状态的函数。使得其可同步支持服务端和客户端(不理解…);
  • 为了完整类型推理,推荐使用箭头函数;
// 选项式API方式
import { defineStore } from 'pinia'const userUserStore = defineStore('user', {// 使用箭头函数state: ()=> {return {name: 'admin',age: 30,}}
})

使用

通过实例访问,直接读写;

const store = userUserStore();store.name

重置 state

选项式 API 直接调 $reset() 方法。组合式API 要自己创建,参考此处。

const store = userUserStore();store.$reset()

只读的计算属性

使用 mapState() 辅助函数将 state 映射为只读的计算属性。

import { mapState } from 'pinia'
import { useUserStore } from '../stores/user'export default {computed: {// 直接用 this.name,与 store.name 数据相同...mapState(useUserStore, ['name']),...mapState(useUserStore, {// 与上述相同,但注册为 this.myNamemyName: 'name',// 也可以用函数fullName: store => store.name + 'Liu',// 可以访问 this,但没标注类型UserString(store) {return store.age + this.fullName}})}
}

可修改的计算属性

使用 mapWritableState() 辅助函数,但不能像 mapState() 传递成一个函数

import { mapWritableState } from 'pinia'
import { useUserStore } from '../stores/user'export default {computed: {// 直接用 this.name,与 store.name 数据相同。且能改变 this.name = '123'...mapWritableState(useUserStore, ['name']),...mapWritableState(useUserStore, {// 与上述相同,但注册为 this.myName。但没有函数方式myName: 'name',})}}

变更 state

  • 使用 $patch ,两种方式:对象方式和函数方式;
  • 区别是 p a t c h ( ) 允许你将多个变更归入 d e v t o o l s 的同一个条目中。同时请注意,直接修改 s t a t e , patch() 允许你将多个变更归入 devtools 的同一个条目中。同时请注意,直接修改 state, patch()允许你将多个变更归入devtools的同一个条目中。同时请注意,直接修改statepatch() 也会出现在 devtools 中,而且可以进行 time travel (在 Vue 3 中还没有)。不理解…
// 方式一:对象方式
store.$patch({count: store.count + 1,age: 120,name: 'DIO',
})// 方式二:函数方式
store.$patch((state) => {state.items.push({ name: 'shoes', quantity: 1 })state.hasChanged = true
})

替换 state

// 这实际上并没有替换`$state`
store.$state = { count: 24 }
// 在它内部调用 `$patch()`:
store.$patch({ count: 24 })

Getter

  • 完全等同于 store 的 state 计算值,使用 getters 属性来定义;
  • 推荐使用箭头函数,并将接收 state 作为第一个参数;
  • 通过 this 访问 store 实例或其它 getter 值;
// 定义
export const useCounterStore = defineStore('counter', {state:() {return {count: 0,}},getters: {// 通过第一个参数 state 访问 countdoubleCount(state) {return state.count * 2},// 通过 this 访问其它 getter 值doublePlusOne() {return this.doubleCount + 1}}
})
// 访问
<script setup>
import { useCounterStore } from './counterStore'const store = useCounterStore()
</script>
<template><p>Double count is {{ store.doubleCount }}</p>
</template>
  • 向 getter 传递参数,getter 是幕后的计算属性,所以不可以向它们传递任务参数。但可以返回一个函数,函数可接受任意参数;
export const useUserListStore = defineStore('userList', {getters: {getUserById(state) {return (useId) => state.userd.find((user) => user.id === userId)}}
})
  • 想要使用另一个 store 的 getter,直接在 getter 内使用即可;
import { useOtherStore } from './other-store'export const useStore = defineStore('main', {state:() => {//...},getters: {otherGetter(state) {const otherStore = useOtherStore()return state.localData + otherStore.data}}
})
  • setup 中使用,直接访问就行,与 state 属性完全一样;
<script setup>
const store = useCounterStore()
store.count = 3
store.doubleCount // 6
</script>
  • 使用 mapState() 函数将其映射为 getters,与 state 用法一致;

Action

  • 相对于组件中的 method,可通过 defineStore() 中的 actions 属性定义;
  • 它们也是定义业务逻辑的完美选择;
  • 类似 getter,action 也可通过 this 访问整个 store 实例;
  • 不同之处,action 可以是异步的,可使用 async 或 Promise;
import { mande } from 'mande'const api = mande('/api/users')export const useUsers = defineStore('users', {state: () => {return {userData: null,}},actions: {async registerUser(login, password) {try {this.userData = await api.post({login, password})} catch(error) {showTooltip(error)}}}
})

调用:可以像函数或通常意义上的方法一样被调用;

<script setup>
const store = useCounterStore();
// 将 action 作为 store 的方法进行调用
store.randomizeCounter()
</script>
<template><!-- 即使在模板中也可以 --><button @click="store.randomizeCounter()"></button>
</template>
  • 访问其它 store 的 action,直接在 action 中调就好了;

  • 选项式API的用法

import { defineStore } from 'pinia'const userCounterStore = defineStore('counter', {state: () => {count: 0},actions: {increment() {this.count++;}}
})
  • 使用 setup();
  • 不使用 setup():mapActions 辅助函数将action属性映射为你组件中的方法;

组件外的 Store

单页面应用
  • app.use(pinia) 安装后,对 useStore() 的调用才能正常使用;
  • 为确保 pinia 实例北极狐,最简单的方法是将 useStore() 调用放在 pinia 安装之后再执行的函数中;
import { useUserStore } from '@/stores/user'
import { createApp } from 'vue'
import App from './App.vue'// 错误
const userStore = useUserStore()const pinia = createPinia()
const app = createApp(App)
app.use(pinia)// 正确,因为 pinia 实例现在被激活
const userStore = useUserStore()

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

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

相关文章

基于FPGA的SM3加密算法优化(SM3加密算法三)

前文根据奇哥的方法使用FPGA实现了SM3加密算法&#xff0c;算法实现方式正确&#xff0c;但在并行度为2的情况下&#xff0c;在zynq7030ffg676-2也只能跑到50MHz&#xff0c;并行度为1也跑不到100MHz。 因此在了解原理的过程中&#xff0c;发现消息扩展和迭代过程其实可以全部放…

Kappa架构介绍

Kappa 架构是由 LinkedIn 的前首席工程师杰伊克雷普斯&#xff08;Jay Kreps&#xff09;提出的一种架构思想。克雷普斯是几个著名开源项目&#xff08;包括 Apache Kafka 和 Apache Samza 这样的流处理系统&#xff09;的作者之一。 Kappa &#xff0c;不同于Lambda同时计算流…

python的四个进度条

哈喽&#xff0c;我是快乐吗喽&#xff0c;今天简单的给大家介绍一下python的四个进度条工具&#xff0c;希望各位喜欢。 第一个进度条工具tqdm&#xff0c;好记点我叫她淘气大妈 安装tqdm库 pip install tqdm 基本用法 from tqdm import tqdm import timefor i in tqdm(ran…

智能合约中存储和计算效率漏洞

存储和计算效率 不当的存储结构或计算密集型操作可能导致高Gas费用和性能瓶颈。示例场景&#xff1a;频繁读取和写入大数组 假设你正在构建一个投票系统&#xff0c;其中每个提案都有一个独立的计票器。为了实现这一点&#xff0c;你可能最初会考虑使用一个映射&#xff08;m…

彼长技以助己(5)量级思维

彼长技以助己&#xff08;5&#xff09;量级思维 数字感性与理性测试 我先讲一个可能发生在我们身边的故事&#xff1a;一个程序员在一个项目开发中使用了考虑到目前业务量少&#xff0c;快速写了一个冒泡排序&#xff0c;结果被经理批评了&#xff0c;然后他跑来找你诉苦&am…

AI漫画赛道,10分钟快速赚钱秘诀!

AI百宝箱-Chatgpt4.0、Midjourney绘画、人工智能绘画、AI换脸、AI图片放大、AI图片分析、AI图片融合https://h5.cxyhub.com/?invitationhmeEo7 先使用ChatGPT写小说 ComicAI 漫画小说生成网站 1. 创建小说漫画 2. 故事模板 3. 生成角色形…

递归查询和迭代查询

在域名解析过程中&#xff0c;一般有两种查询方式:递归查询和迭代查询。递归查询:服务器必需回答目标IP与域名的映射关系。迭代查询:服务器收到一次迭代查询回复一次结果&#xff0c;这个结果不一定是目标IP与域名的映射关系&#xff0c;也可以是其它DNS服务器的地址。 递归是某…

Java 反射的基本概念及其在框架中的应用

Java反射&#xff08;Reflection&#xff09;是Java语言中的一种特性&#xff0c;它允许程序在运行时检查和操作类、接口、字段和方法。反射提供了一种机制&#xff0c;使得Java程序可以动态地加载类、创建对象、调用方法、访问和修改字段。反射是Java动态性的重要体现&#xf…

项目经理与业务方沟通机制的6个重点

软件项目经理与业务方的有效沟通是项目成功的关键&#xff0c;通过定期对需求进行讨论和确认&#xff0c;有助于需求的精准理解&#xff0c;提高项目需求质量和决策效率&#xff0c;有利于团队间协作沟通&#xff0c;增强信任与合作&#xff0c;提高开发质量。如果双方间缺乏有…

旅游卡是项目还是骗局?还是实实在在的旅游项目?

旅游卡是一个实实在在的旅游项目&#xff0c;而非骗局。以下是我对旅游卡项目的几点分析&#xff1a; 项目实质&#xff1a; 旅游卡项目是由国内外多条旅游线路整合而成的卡片&#xff0c;为旅游者提供方便、实惠的旅游方式。持有旅游卡&#xff0c;可以完全抵销跟团游线路中的…

旋转三角形加载动画

效果图: 完整代码: <!DOCTYPE html> <html> <head><meta charset="UTF-8" /><title>旋转三角形加载动画</title><style type="text/css">body {background: #ECF0F1;display: flex;justify-content: center;…

如何打造一份出色的文案策划求职简历?看完这篇你就明白了

从事文案策划多年&#xff0c;在简历打造上&#xff0c;也有些许心得&#xff0c;这些年面试通过率也在80%以上。 都说不会打造简历的文案人不是一个合格的文案&#xff0c;首先分享几点我的简历打造理念。 1、用写广告文案的思维写简历 如果把个人劳动力作为商品来看&#…

超详解——Python模块文档——基础篇

目录 1. Unix起始行 示例&#xff1a; 2. 对象和类型 示例&#xff1a; 3. 一切都是对象 示例&#xff1a; 4. 理解对象和引用 示例&#xff1a; 5. 理解对象和类型 示例&#xff1a; 6. 标准类型 示例&#xff1a; 7. 其他内建类型 示例&#xff1a; 8. 类型的类…

人工智能和机器学习这两个概念有什么区别?

什么是人工智能&#xff1f; 先来说下人工智能&#xff0c;人工智能&#xff08;Artificial Intelligence&#xff09;&#xff0c;英文缩写为AI&#xff0c;通俗来讲就是用机器去做在过去只有人能做的事。 人工智能最早是由图灵提出的&#xff0c;在1950年&#xff0c;计算机…

气膜建筑在体育和娱乐行业的多样化应用—轻空间

随着人们生活水平的提高和健康意识的增强&#xff0c;体育和娱乐行业的发展迎来了新的机遇和挑战。气膜建筑&#xff0c;作为一种新型建筑技术&#xff0c;因其独特的优势和广泛的应用场景&#xff0c;正在引领体育和娱乐行业的新潮流。 快速建设高品质体育场馆 气膜建筑以其快…

语音研究方向学术和工作资源清单

Speech-Resource 国内高校 清华大学北京大学上海交通大学中国科学院中国科学技术大学西北工业大学天津大学厦门大学昆山杜克大学浙江大学哈尔滨工业大学香港中文大学香港科技大学香港理工大学台湾大学 海外高校 剑桥大学牛津大学爱丁堡大学谢菲尔德大学蒙特利尔大学麻省理工大学…

《Brave New Words 》5.1 传递真相:偏见和虚假信息现状

Part V: Keeping Kids Safe 第五部分&#xff1a;确保孩子安全 Never travel faster than your guardian angel can fly. —Mother Teresa 永远不要比你的守护天使飞得更快。 ——特蕾莎修女 Distrust and caution are the parents of security. —Benjamin Franklin 不信任和谨…

数据结构基础(基于c++)

数据结构基础&#xff08;基于c&#xff09; 文章目录 数据结构基础&#xff08;基于c&#xff09;前言1. 递归、迭代、时间复杂度、空间复杂度2. 数据结构 数组与链表1. 数组2. 链表3. 动态数组4. 数组与链表对比 前言 参考资料&#xff1a;Hello 算法 (hello-algo.com) 1. 递…

假期已结束,大家都开始上班了吗

千行赏金APP&#xff1a;一站式悬赏任务平台详解 一、功能特点 千行赏金APP&#xff0c;作为一个综合性的悬赏任务平台&#xff0c;其功能特点突出&#xff0c;为用户提供了丰富的体验。首先&#xff0c;用户可以在平台上发布各类任务&#xff0c;如填写问卷、参与调研、试玩游…

MySQL高性能(MySQL锁)

MySQL性能系列 MySQL锁 前言1. 死锁机制2. 思维导图与锁划分介绍3. 粒度划分锁3.1. 全局锁3.2. 页级锁&#xff08;Page-level locking&#xff09;3.3. 表级锁&#xff08;Tables-level lock&#xff09;○ 共享锁&#xff08;表级&#xff09;○ 排他锁&#xff08;表级&…