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

2024-06-15 05:36

本文主要是介绍《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()

这篇关于《Vue3 基础知识》Pinia 01 之 基础的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1062562

相关文章

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.