Pinia介绍和使用

1. pinia是什么

Pinia 是一个基于 Vue.js 的状态管理库，用于管理应用程序的数据。它提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态，下面是详细介绍

  1. 基于 Vue 3：Pinia 是专门为 Vue 3 开发的状态管理库，充分利用了 Vue 3 的响应性系统和 Composition API。
  2. 类 Vuex 的 API：Pinia 的 API 设计灵感来自于 Vuex，因此对于熟悉 Vuex 的开发人员来说，使用 Pinia 应该会感到非常熟悉。
  3. 存储库（Stores）：Pinia 将应用程序的状态组织为存储库的形式。每个存储库代表一个特定的数据领域或功能。存储库包含状态（state）、动作（actions）、获取器（getters）等。
  4. 响应式状态管理：Pinia 使用 Vue 3 的响应性系统，确保状态的变化能够自动追踪和响应，从而实现了高效的状态管理。
  5. 插件系统：Pinia 提供了插件系统，用于扩展和增强其功能。通过插件，您可以添加中间件、持久化存储、调试工具等来满足特定的需求。
  6. 类型安全：Pinia 支持 TypeScript，并且提供了类型安全的 API 和开发体验。这使得在开发过程中能够更好地捕获错误和进行静态类型检查。
  7. 支持异步操作：Pinia 支持在动作（actions）中执行异步操作，如发送网络请求、处理副作用等。
  8. 适用于大型应用程序：Pinia 的设计使得它非常适用于大型应用程序，可以轻松管理复杂的状态逻辑和数据流。

官方文档：

https://pinia.web3doc.top/introduction.html

2. pinia基本使用

a. 安装依赖

npm install pinia

b. 使用pinia

  1. 在main.js中引入pinia
import { createPinia } from "pinia";
const pinia = createPinia();createApp(App).use(pinia).mount('#app')
  1. 在src目录下创建一个store文件夹，然后在store文件夹内创建index.js文件
import { defineStore } from 'pinia'// useStore 一般命名是use开头，useProductStore、useUserStore 等等
// defineStore 是用于定义存储库（store）的方法。它接受两个参数：storeName 和 storeDefinition。
//  1.storeName（必需）：表示存储库的名称，是一个字符串。该名称用于在 Pinia 中唯一标识存储库，因此在应用程序中定义不同的存储库时，应确保每个存储库具有唯一的名称。
//  2.storeDefinition（必需）：表示存储库的定义，是一个对象。该对象包含了存储库的配置、状态（state）、动作（actions）、获取器（getters）等。
export const useStore = defineStore('user', {// 推荐使用 完整类型推断的箭头函数state: () => {return {// 所有这些属性都将自动推断其类型name: "curry",age: 35,};},
})
  1. 在组件中使用
<template><!-- 在页面中直接使用就可以了--><div>name值：{{ userStore.name }}</div><div>age值：{{ userStore.age }}</div>
</template><script setup>// 引入一下创建的storeimport {useUserStore} from '../store/index'// 因为是个方法，所以我们得调用一下const userStore = useUserStore()</script>
  1. 页面展示

img

c. 解构后响应式处理

useStore获取到后不能解构，否则失去响应式，如果想要保持响应式可以使用storeToRefs()函数

  1. storeToRefs函数使用
<template><!-- 在页面中直接使用就可以了--><div>name值：{{ userStore.name }}</div><div>age值：{{age }}</div><button @click="addAge">修改年龄</button>
</template><script setup>
// 引入一下创建的store
import {useUserStore} from '../store/index'
import {storeToRefs} from 'pinia'const userStore = useUserStore()const {age} = storeToRefs(userStore)function addAge() {userStore.age = userStore.age + 1
}</script>
  1. 页面展示

img

d. $patch函数

$patch函数也是常用修改Store的方法

  1. $patch函数使用
<template><!-- 在页面中直接使用就可以了--><div>name值：{{ userStore.name }}</div><div>age值：{{ age }}</div><button @click="addAge">修改年龄</button>
</template><script setup>// 引入一下创建的storeimport {useUserStore} from '../store/index'import {storeToRefs} from 'pinia'const userStore = useUserStore()const {age} = storeToRefs(userStore)function addAge() {// userStore.age = userStore.age + 1userStore.$patch({name: "James",age: 39})}</script>
  1. 页面展示

img

e. $reset()函数

$reset()函数的作用是重置state中的数据

  1. $reset()函数使用
<template><!-- 在页面中直接使用就可以了--><div>name值：{{ userStore.name }}</div><div>age值：{{ age }}</div><button @click="addAge">修改年龄</button><button @click="restart">重置store</button>
</template><script setup>// 引入一下创建的storeimport {useUserStore} from '../store/index'import {storeToRefs} from 'pinia'const userStore = useUserStore()const {age} = storeToRefs(userStore)function addAge() {userStore.age = userStore.age + 1}function restart() {userStore.$reset()}</script>

2.页面展示

img

3. getters和actions

在Pinia插件中，getters（获取器）和actions（动作）是两个不同的概念，用于处理和访问存储库中的数据。

a. getters

ⅰ. getters介绍

Getter是用于获取存储库中的状态（state）的方法。Getter类似于计算属性，它们基于存储库的状态计算出一个值，并在需要时被调用。Getter可以接受参数，并且可以进行逻辑操作和计算，但不能直接修改状态。

Getter的主要特点包括：

  1. 用于获取和计算存储库的状态。
  2. 可以接受参数进行动态计算。
  3. 在状态发生变化时，Getter会自动重新计算。
  4. 不能直接修改状态，只能读取状态。
ⅱ. getters使用案例
  1. getters中添加doubleAge方法
import { defineStore } from 'pinia'// useStore 一般命名是use开头，useProductStore、useUserStore 等等
// defineStore 是用于定义存储库（store）的方法。它接受两个参数：storeName 和 storeDefinition。
//  1.storeName（必需）：表示存储库的名称，是一个字符串。该名称用于在 Pinia 中唯一标识存储库，因此在应用程序中定义不同的存储库时，应确保每个存储库具有唯一的名称。
//  2.storeDefinition（必需）：表示存储库的定义，是一个对象。该对象包含了存储库的配置、状态（state）、动作（actions）、获取器（getters）等。
export const useUserStore = defineStore('user', {// 推荐使用 完整类型推断的箭头函数state: () => {return {// 所有这些属性都将自动推断其类型name: "curry",age: 35,};},getters: {// 年龄乘以2doubleAge: (state) => state.age * 2,},
})
  1. 调用addAge
<template><!-- 在页面中直接使用就可以了--><div>name值：{{ userStore.name }}</div><div>age值：{{ age }}</div><div>doubleAge：{{ userStore.doubleAge }}</div><button @click="addAge">修改年龄</button><button @click="restart">重置store</button>
</template><script setup>// 引入一下创建的storeimport {useUserStore} from '../store/index'import {storeToRefs} from 'pinia'const userStore = useUserStore()const {age} = storeToRefs(userStore)function addAge() {userStore.age = userStore.age + 1}function restart() {userStore.$reset()}</script>
  1. 页面展示

img

b. actions

ⅰ. actions介绍

Action是用于对存储库中的状态进行操作和修改的方法。Action可以执行异步操作，如发送网络请求、处理副作用等。Action可以接受参数，并且可以修改状态或触发其他动作。

Action的主要特点包括：

  1. 用于操作和修改存储库的状态。
  2. 可以接受参数进行动态操作。
  3. 可以进行异步操作，如发送网络请求。
  4. 可以修改状态或触发其他动作。
ⅱ. actions使用案例
  1. actions添加doubleAge方法
import {defineStore} from 'pinia'// useStore 一般命名是use开头，useProductStore、useUserStore 等等
// defineStore 是用于定义存储库（store）的方法。它接受两个参数：storeName 和 storeDefinition。
//  1.storeName（必需）：表示存储库的名称，是一个字符串。该名称用于在 Pinia 中唯一标识存储库，因此在应用程序中定义不同的存储库时，应确保每个存储库具有唯一的名称。
//  2.storeDefinition（必需）：表示存储库的定义，是一个对象。该对象包含了存储库的配置、状态（state）、动作（actions）、获取器（getters）等。
export const useUserStore = defineStore('user', {// 推荐使用 完整类型推断的箭头函数state: () => {return {// 所有这些属性都将自动推断其类型name: "curry",age: 35,};},getters: {// 年龄乘2doubleAge: (state) => state.age * 2,},actions:{incrementAge(num){this.age += num}}})
  1. 调用doubleAge方法
<template><!-- 在页面中直接使用就可以了--><div>name值：{{ userStore.name }}</div><div>age值：{{ userStore.age }}</div><button @click="changeState">changeState</button>
</template><script setup>// 引入一下创建的storeimport {useUserStore} from '../store/index'const userStore = useUserStore()function changeState() {userStore.incrementAge(10)}</script>
  1. 页面展示

img

总结：
Getter用于获取存储库的状态并进行计算，而Action用于操作和修改存储库的状态。

Getter主要用于获取数据，而Action主要用于执行操作和修改数据。

根据您的需求，选择适当的方式来读取或修改存储库中的数据。

4. 数据的持久化

默认pinia数据是没有持久化的，刷新页面就变成默认值了，持久化需要安装如下插件

ⅰ. 安装插件
npm i pinia-plugin-persist
ⅱ. 在main.js中引入持久化插件
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia";
import piniaPluginPersist from "pinia-plugin-persist"; //pinia持久化
const pinia = createPinia();
pinia.use(piniaPluginPersist);createApp(App).use(pinia).mount('#app')
ⅲ. 在store中使用
import {defineStore} from 'pinia'// useStore 一般命名是use开头，useProductStore、useUserStore 等等
// defineStore 是用于定义存储库（store）的方法。它接受两个参数：storeName 和 storeDefinition。
//  1.storeName（必需）：表示存储库的名称，是一个字符串。该名称用于在 Pinia 中唯一标识存储库，因此在应用程序中定义不同的存储库时，应确保每个存储库具有唯一的名称。
//  2.storeDefinition（必需）：表示存储库的定义，是一个对象。该对象包含了存储库的配置、状态（state）、动作（actions）、获取器（getters）等。
export const useUserStore = defineStore('user', {// 推荐使用 完整类型推断的箭头函数state: () => {return {// 所有这些属性都将自动推断其类型name: "curry",age: 35,};},getters: {// 年龄乘2doubleAge: (state) => state.age * 2,},actions: {incrementAge(num) {this.age += num},changeName(name) {this.name = name}},persist: {// 默认会保存当前模块全部数据enabled: true, // 开启缓存  默认会存储在本地localstoragestorage: sessionStorage, // 缓存使用方式}
})

刷新页面age不会被重置

store中所有的store都被保存了

img

页面刷新后age也不会变成默认值，证明持久化成功

ⅳ. 设置 key 、指定保存内容

有时可能只要保存部分数据，这是就要用到strategies，在里面自定义保存的内容了

key设置为’age’，paths设置只保存’age’

import {defineStore} from 'pinia'// useStore 一般命名是use开头，useProductStore、useUserStore 等等
// defineStore 是用于定义存储库（store）的方法。它接受两个参数：storeName 和 storeDefinition。
//  1.storeName（必需）：表示存储库的名称，是一个字符串。该名称用于在 Pinia 中唯一标识存储库，因此在应用程序中定义不同的存储库时，应确保每个存储库具有唯一的名称。
//  2.storeDefinition（必需）：表示存储库的定义，是一个对象。该对象包含了存储库的配置、状态（state）、动作（actions）、获取器（getters）等。
export const useUserStore = defineStore('user', {// 推荐使用 完整类型推断的箭头函数state: () => {return {// 所有这些属性都将自动推断其类型name: "curry",age: 35,};},getters: {// 年龄乘2doubleAge: (state) => state.age * 2,},actions: {incrementAge(num) {this.age += num},changeName(name) {this.name = name}},// persist: {//     默认会保存当前模块全部数据//     enabled: true, // 开启缓存  默认会存储在本地localstorage//     storage: sessionStorage, // 缓存使用方式// }//持久化persist: {enabled: true,// 自定义持久化参数strategies: [{// 自定义keykey: "age",// 自定义存储方式，默认sessionStoragestorage: sessionStorage,// 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。paths: ["age"],}],},
})

这时看到只有age被保存

img

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

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

相关文章

Termux配置安卓编译环境

Termux配置安卓编译环境

前言 Termux安装后&#xff0c;就相当于把手机变成了一台Linux服务器&#xff0c;而且现在手机卡通常是能拿到ipv6公网地址的&#xff0c;所以&#xff0c;这个服务器能干啥&#xff1f; 编程搭建网站跑脚本 本文讲述的就是怎么在Termux搭建安卓编译环境&#xff0c;实现手机…
阅读更多...
解决计算机“缺失ffmpeg.dll”报错?修复ffmpeg.dll文件方案

解决计算机“缺失ffmpeg.dll”报错?修复ffmpeg.dll文件方案

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“ffmpeg.dll丢失”。ffmpeg.dll是FFmpeg多媒体框架中的一个重要组件&#xff0c;它负责处理音频和视频的编解码。当打开某些软件时&#xff0c;如果系统找不到该文件&#xff0c;就会出现这…
阅读更多...
【数据结构】链表OJ面试题3(题库+解析)

【数据结构】链表OJ面试题3(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 记录每天的刷题&#xff0c;继续坚持&#xff01; 2.OJ题目训练 9. 给定一个链表&#xff0c;判断链表中是否有环。 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成…
阅读更多...
怎么理解 Redis 事务

怎么理解 Redis 事务

背景 在面试中经常会被问到&#xff0c;redis支持事务吗&#xff1f;事务是怎么实现的&#xff1f;事务会回滚吗&#xff1f;又是一键三连&#xff0c;我下面分析下&#xff0c;看看能不能吊打面试官 什么是Redis事务 事务是一个单独的隔离操作&#xff1a;事务中的所有命令…
阅读更多...
《Git 简易速速上手小册》第3章：分支管理（2024 最新版）

《Git 简易速速上手小册》第3章：分支管理（2024 最新版）

文章目录 3.1 创建与合并分支3.1.1 基础知识讲解3.1.2 重点案例&#xff1a;为 Python 项目添加新功能3.1.3 拓展案例 1&#xff1a;使用 Pull Requests (PRs) 在团队中合作3.1.4 拓展案例 2&#xff1a;解决合并冲突 3.2 分支策略的最佳实践3.2.1 基础知识讲解3.2.2 重点案例&…
阅读更多...
JVM 性能调优- 五种内存溢出(5)

JVM 性能调优- 五种内存溢出(5)

在介绍之前先简单介绍下 直接内存（Direct Memory）和堆内存（Heap Memory）： 关系： 直接内存并不是Java虚拟机的一部分，它是通过Java的NIO库中的ByteBuffer来分配和管理的。直接内存通常由操作系统的本地内存（Native Memory）提供支持。堆内存是Java虚拟机的一部分，用于存…
阅读更多...
幻兽帕鲁mac可以玩吗？

幻兽帕鲁mac可以玩吗？

《幻兽帕鲁》&#xff08;英文&#xff1a;Palworld&#xff09;是一款近期在 Steam 爆红的动作冒险生存游戏&#xff0c;游戏设置在一个居住着「帕鲁」的开放世界中&#xff0c;玩家可以战斗并捕捉帕鲁&#xff0c;也能用它们来建造基地、骑乘和战斗。 不过目前《幻兽帕鲁》仅…
阅读更多...
2024/02/06

2024/02/06

画出TCP三次握手和四次挥手的示意图 三次握手 四次挥手 并且总结TCP和UDP的区别 TCP: TCP提供面向连接的&#xff0c;可靠的数据传输服务传输过程中&#xff0c;数据无误、数据无丢失、数据无失序、数据无重复 TCP会给每个数据包编上编号&#xff0c;该编号称之为序列号每个序…
阅读更多...
林浩然与杨凌芸的Java奇缘：抽象类、接口与多态的编程三部曲

林浩然与杨凌芸的Java奇缘：抽象类、接口与多态的编程三部曲

林浩然与杨凌芸的Java奇缘&#xff1a;抽象类、接口与多态的编程三部曲 The Java Odyssey of Lin Haoran and Yang Lingyun: A Trio of Programming Wisdom with Abstract Classes, Interfaces, and Polymorphism 在代码王国里&#xff0c;住着两位程序员明星——林浩然和杨凌芸…
阅读更多...
Deepin基本环境查看（八）【系统安全：房、车、查房、查车】

Deepin基本环境查看（八）【系统安全：房、车、查房、查车】

Deepin基本环境查看&#xff08;八&#xff09;【系统安全&#xff1a;房、车、查房、查车】 - 相关文章目录1、概述2、想象中的... 现实中的...1&#xff09;想象中的我2&#xff09;梦幻中的我3&#xff09;现实中的我 3 要房、要车、还是房车都要1&#xff09;超级计算机2&a…
阅读更多...
npm 上传一个自己的应用(4) 更新自己上传到NPM中的工具版本 并就行内容修改

npm 上传一个自己的应用(4) 更新自己上传到NPM中的工具版本 并就行内容修改

前面 npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM 我们讲了将自己写的一个函数发送到npm上 那么 如果我们想到更好的方案 希望对这个方法进行修改呢&#xff1f; 比如 我们这里加一个方法 首先 我们还是要登录npm npm login然后 根据要求填写 Username 用…
阅读更多...
一文简介Maven初级使用

一文简介Maven初级使用

一.概述 Maven是专门用于管理和构建Java项目的工具&#xff0c;它的主要功能有&#xff1a; 提供了一套标准化的项目结构提供了一套标准化的项目构建流程&#xff08;编译&#xff0c;测试&#xff0c;打包&#xff0c;发布&#xff09;提供了一套依赖管理机制 一方面&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023