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 useUserStore = 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://xiahunao.cn/news/2775052.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

【若依】若依框架在本地运行的操作方法，及踩坑记录

【若依】若依框架在本地运行的操作方法，及踩坑记录

若依框架简介 若依是一个Gitee上一个开源的基于SpringBoot开发的轻量级Java快速开发框架&#xff0c;用以快速构建后台管理系统&#xff0c;点击跳转到官方地址 本机部署过程 Step1. 下载项目源码 我选择的是直接下载zip压缩包&#xff0c;解压后得到如下文件夹&#xff0c…
阅读更多...
QLabel重绘实现圆角矩形图片/文本和图片同时显示

QLabel重绘实现圆角矩形图片/文本和图片同时显示

QLabel一般用于显示一段文字&#xff0c;这段文字可以被鼠标选中/复制&#xff0c;也可是设置自动换行等&#xff0c;还可以用于显示图片。 但是使用QLabel显示图片时&#xff0c;qss样式设置的圆角radius属性是不生效的。 QLabel显示纯文本时&#xff0c;设置了背景颜色后&a…
阅读更多...
WifiConfigStore初始化读取-Android13

WifiConfigStore初始化读取-Android13

WifiConfigStore初始化读取 1、StoreData创建并注册2、WifiConfigStore读取2.1 文件读取流程2.2 时序图2.3 日志 1、StoreData创建并注册 packages/modules/Wifi/service/java/com/android/server/wifi/WifiConfigManager.java mWifiConfigStore.registerStoreData(mNetworkL…
阅读更多...
pytorch入门第一天

pytorch入门第一天

今天作为入门pytorch的第一天。打算记录每天学习pytorch的一些理解和笔记&#xff0c;以用来后面回顾。当然如果能帮到和我一样的初学者&#xff0c;那也是不胜荣幸。作为一名初学者&#xff0c;难免有些地方会现错误&#xff0c;欢迎各位大佬指出 预备知识 这里主要介绍pyto…
阅读更多...
面向对象的三大特征之一继承

面向对象的三大特征之一继承

继承 继承的特性 概念&#xff1a;可以使得子类具有父类的属性(成员变量)和方法(成员方法)&#xff0c;还可以在子类中重新定义&#xff0c;追加属性和方法。 继承的格式&#xff1a; public class 子类名 extends 父类名{} 父类&#xff1a;基类、超类 子类&#xff1a;派生…
阅读更多...
React + SpringBoot + Minio实现文件的预览

React + SpringBoot + Minio实现文件的预览

思路&#xff1a;后端提供接口&#xff0c;从minio获取文件的预览链接&#xff0c;返回给前端&#xff0c;前端使用组件进行渲染展示 这里我从minio获取文件预览地址用到了一个最近刚开源的项目&#xff0c;挺好用的&#xff0c;大伙可以试试&#xff0c;用法也很简单 官网&am…
阅读更多...
C语言笔试题之实现C库函数 pow()（递归的思想）

C语言笔试题之实现C库函数 pow()（递归的思想）

实例要求&#xff1a; 1、请你实现C库函数 pow()&#xff08;stdio.h & math.h&#xff09; &#xff0c;即计算 x 的整数 n 次幂函数&#xff08;即x^n &#xff09;&#xff1b;2、函数声明&#xff1a;double myPow(double x, int n)&#xff1b;参数&#xff1a;1、x …
阅读更多...
C++进阶（十三）异常

C++进阶（十三）异常

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、C语言传统的处理错误的方式二、C异常概念三、异常的使用1、异常的抛出和捕获2、异常的重新…
阅读更多...
leetcode707. 设计链表

leetcode707. 设计链表

leetcode707. 设计链表 题目 思路 1.使用虚头节点&#xff0c;模拟class的初始化 2.class中添加一个链表长度的属性&#xff0c;便于后续操作 代码 class ListNode:def __init__(self, val0, nextNone):self.val valself.next nextclass MyLinkedList:def __init__(self)…
阅读更多...
创新指南｜生成式AI实验 - 企业快速渐进采用人工智能的科学新方法

创新指南｜生成式AI实验 - 企业快速渐进采用人工智能的科学新方法

生成式人工智能&#xff08;Gen AI&#xff09;正迅速成为各行各业的企业创新焦点。 生成式AI实验对于企业创新而言至关重要&#xff0c;不仅可以帮助企业识别最适合和最有影响的应用场景&#xff0c;还能促进组织沿着生成式 AI 学习曲线前进&#xff0c;建立早期的创新领导者和…
阅读更多...
Elementplus报错 [ElOnlyChild] no valid child node found

Elementplus报错 [ElOnlyChild] no valid child node found

报错描述&#xff1a;ElementPlusError: [ElOnlyChild] no valid child node found 问题复现&#xff08;随机例子&#xff09;&#xff1a; <el-popover placement"right" :width"400" trigger"click"><template #reference><e…
阅读更多...
零基础学Python之Unitest模块

零基础学Python之Unitest模块

1.unittest简介及入门案例 &#xff08;1&#xff09;什么是Unitest Unittest是Python自带的单元测试框架&#xff0c;不仅适用于单元测试&#xff0c;还可用于Web、Appium、接口自动化测试用例的开发与执行。该测试框架可组织执行测试用例&#xff0c;并且提供丰富的断言方法…
阅读更多...
Unity引擎学习笔记之【动画层操作】

Unity引擎学习笔记之【动画层操作】

动画层Animation Layer 一、动画器的三个基本状态 1. Any State&#xff08;任意状态&#xff09; “Any State”&#xff08;任意状态&#xff09;&#xff1a;这个状态可以用来连接多个状态机的任意状态转换。在动画控制器中&#xff0c;你可以使用“Any State”作为过渡条…
阅读更多...
问题：银行账号建立以后，一般需要维护哪些设置，不包括（） #学习方法#经验分享

问题：银行账号建立以后，一般需要维护哪些设置，不包括（） #学习方法#经验分享

问题&#xff1a;银行账号建立以后&#xff0c;一般需要维护哪些设置&#xff0c;不包括&#xff08;&#xff09; A&#xff0e;维护结算科目对照 B&#xff0e;期初余额初始化刷 C&#xff0e;自定义转账定义 D&#xff0e;对账单初始化 参考答案如图所示
阅读更多...
c入门第十篇——指针入门

c入门第十篇——指针入门

一句话来说: 指针就是存储了内存地址值的变量。 在前面讨论传值和传址的时候&#xff0c;我们就已经开始使用了指针来传递地址。 在正式介绍指针之前&#xff0c;我们先来简单了解一下内存。内存可以简单的理解为一排连续的房子的街道&#xff0c;每个房子都有自己的地址&#…
阅读更多...
94.网游逆向分析与插件开发-游戏窗口化助手-地图数据获取的逆向分析与C++代码还原

94.网游逆向分析与插件开发-游戏窗口化助手-地图数据获取的逆向分析与C++代码还原

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;升级经验数据获取的逆向分析 码云地址&#xff08;游戏窗口化助手 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/sro_-ex.git 码云版本号&#xff1a;c4351a5b346d8953a1a8e3ec…
阅读更多...
还是蓝海项目？浅谈steam海外道具搬运项目几个常见问题！

还是蓝海项目？浅谈steam海外道具搬运项目几个常见问题！

做steam这个项目做了已经3年多了。记得刚开始做的时候还是一个很冷门的项目&#xff0c;现在越来越多的朋友也开始了解这个项目。 其中不乏很多已经在别的地方了解过后来找我咨询的朋友。我发现一些同行或者说自媒体太过于虚假宣传&#xff0c;把steam这个项目说的太好了。也有…
阅读更多...
Java学习15-- 面向对象学习3. 对象的创建分析【★】

Java学习15-- 面向对象学习3. 对象的创建分析【★】

&#xff08;本章看不懂多读几遍&#xff0c;弄懂后再往下章看&#xff09; 面向对象学习3. 对象的创建分析 Java Memory Structure: 如上图所示&#xff1a; 主要分为Stack和Heap Memory 其中Stack主要放method包括main 程序从main开始所以main最先进入Stack&#xff0c;等…
阅读更多...
【十二】【C++】vector用法的探究

【十二】【C++】vector用法的探究

vector类创建对象 /*vector类创建对象*/ #if 1 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std; #include <vector> #include <algorithm> #include <crtdbg.h>class Date {public:Date(int year 1900, int month 1, int …
阅读更多...
Web课程学习笔记--CSS选择器的分类

Web课程学习笔记--CSS选择器的分类

CSS 选择器的分类 基本规则 通过 CSS 可以向文档中的一组元素类型应用某些规则 利用 CSS&#xff0c;可以创建易于修改和编辑的规则&#xff0c;且能很容易地将其应用到定义的所有文本元素 规则结构 每个规则都有两个基本部分&#xff1a;选择器和声明块&#xff1b;声明块由一…
阅读更多...
最新文章

Copyright @ 2022~2023