vue3状态管理,pinia的使用

​​​​​​​状态管理

        我们知道组件与组件之间可以传递信息,那么我们就可以将一个信息作为组件的独立状态(例如,单个组件的颜色)或者共有状态(例如,多个组件是否显示)在组件之传递,这样的话我们希望这个信息在所有组件中共享,这样就可以监控所有组件的状态,但是一般的信息传递方式想要在所有组件传递一个信息会形成一个复杂的关系网,不利于管理且中间组件若产生异常,这个关系网就会断裂,整个网页的组件就会变的无法监控,

所以我们需要一个工具来管理所有组件的状态,他需要以下几点功能

1.能够注册一个全局状态(store),形成一个中间件,让所有组件都能访问到,

2.当这个全局状态被某一个组件影响改变时,它能够让其他组件更新这个状态,

3.将信息独立出来,不因为一个组件错误,产生全局错误

vuex和pinia

vuex和pinia都是vue的状态管理工具,它们的作用相同,用法几乎没有区别,但是pinia的结构更加简洁,同时对Ts的兼容性更强。

vuex和pinia的核心

vuexpinia
state --- 状态信息state --- 状态信息
getter --- 选择性的读取信息getter --- 选择性的读取信息
mutation --- 可以执行同步操作action --- 可以执行同步和异步操作
action --- 可以执行异步操作 返回一个mutation

vuex和pinia的关系

Pinia 起源于一次探索 Vuex 下一个迭代的实验,因此结合了 Vuex 5 核心团队讨论中的许多想法。最后,我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分功能,所以决定将其作为新的推荐方案来代替 Vuex。

这两个工具相似度很高,作用也一致,当你熟练掌握其中一个时,另一个也能够轻松使用,这里我们还是使用pinia作为项目的状态管理器

pinia的基本使用

手动引入pinia

新建一个vue项目

npm create vue@latest

输入完项目名称后一路回车即可,对于是否引入pinia的选项我们暂时不选则, 

 

这里我们在src的目录下新建一个文件夹store,并在store下新建一个index.js,然后删除components文件夹的原内容,并新建两个vue文件

安装pinia包

npm install pinia

安装完成后可以在package中看到,然后我们开始导入pinia

main.js:

import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'createApp(App).use(createPinia()).mount('#app')

 导入完成后我们在index.js中配置pinia

index.js:

import {defineStore} from 'pinia'export const useStore = defineStore('counter', {state: () => {return {// 定义状态counter: 0}},// 定义计算属性getters: {// 定义计算属性getCounter: (state) => {return state.counter>=5?state.counter:"数据不足"}},// 定义操作actions: {// 定义操作addCounter() {this.counter++}}// 定义其他选项// ...
})

 注意 :第一个参数counter是返回store的一个标识,在一个项目中,我们可以新建多个store来表示多个状态,每个状态都有一个标识;第二个参数是一个对象,里面包含了state定义状态可以返回多个值(任意类型)表示状态,getter定义了一个属性运算的方法,可以用来过滤数据,只拿需要的数据(外部使用这个方法时不带括号),action定义了一个操作(可以 是异步操作,外部调用是要带括号);

然后我们再对App.vue,myComA.vue,myComB.vue引入store中间件

App.vue,

<script setup>
import myComA from './components/myComA.vue'
import myComB from './components/myComB.vue'
import { useStore } from './store/index.js'
const store = useStore()</script><template><p>{{ store.getCounter }}</p><button @click="store.addCounter()">counter = {{ store.counter }}</button><myComA/><myComB/>
</template>

myComA.vue,

<script setup>//组合式API
import { useStore } from '../store/index'
const store = useStore()</script><template><div>myComA</div><p>{{ store.counter }}</p>
</template>

myComB.vue

<script setup>//组合式API
import { useStore } from '../store/index'
const store = useStore()</script><template><div>myComB</div><p>{{ store.counter }}</p>
</template>

这里要注意import引入index文件的路径有所不同

完整这些后我们启动项目

npm run dev

        点击一次按钮,store的counter值就加一,当这个值大于等于5时,会在App.vue中显示出来,否则显示数据不足,App.vue,myComA.vue,myComB.vue  3个组件中均有显示,说明3个组件都访问到了数据,它们绑定了一个共同的信息,即便我们移除了myComB.vue其他组件也没有受到影响

这样我们就为每个组件都设置了一个状态,

系统引入pinia

掌握了手动引入pinia后,我们可以再新建一个项目查看以下系统的pinia

npm create vue@latest

我们可以看到它是有一个stores文件夹的,同时再main.js,counter.js,package.json中也是有对应的配置的

我们可以观察到,它的配置方式和我们手动配置的方式有所不同,

其实这个pinia的配置类似于setup函数的结构,有选择式风格和组合式风格,这里采用的是组合式风格,2者的效果是完全一致的,可以自行对比两种方法

我们可以引入之前项目中App.vue,myComA.vue,myComB.vue  3个组件(注意这里的方法和文件名称有所改变)再启动项目查看

app.vue:
<script setup>
import myComA from './components/myComA.vue'
import myComB from './components/myComB.vue'
import { useCounterStore } from './stores/counter.js'
const store =useCounterStore()</script><template><p>{{ store.doubleCount }}</p><button @click="store.increment()">counter = {{ store.count }}</button><myComA/><myComB/>
</template>myComA.vue:
<script setup>//组合式API
import { useCounterStore } from '../stores/counter.js'
const store = useCounterStore()</script><template><div>myComA</div><p>{{ store.count }}</p>
</template>myComB.vue:
<script setup>//组合式API
import { useCounterStore } from '../stores/counter.js'
const store = useCounterStore()</script><template><div>myComB</div><p>{{ store.count }}</p>
</template>
npm run dev

可以看到实现了状态共享,在实际应用中我们使用系统引入pinia后,可以自己手动的将pinia的相关文件调整成我们需要的结构

扩展:pinia数据持久化

登录状态的数据问题

        pinia的状态共享功能最常见的使用就是登录状态的共享,它可以保存当前页面的一个登录状态,这样当你在登录页面登录成功后,其他页面可以共享这个登录状态,在一个页面退出登录后,其他页面也能够共享,这样网页就能区分用户和游客了。

        但是,pinia是基于内存实现的,当你刷新页面后,pinia保存的可共享数据就会刷新,这样我们就需要重新登录,我们希望用户登录后登录状态应该由网络请求返回的token(一段有时间限制会过期的数据)保存,所以我们需要实现pinia的数据持久化,让页面刷新后仍可以保留登录状态,

实现数据持久化

        想在浏览器内存下一串数据不会因为刷新而清空,我们可以想到localStorage就有这个功能,

pinia提供了一个插件,基于localStorage实现了数据的缓存,这样页面刷新后,pinia会先从localStorage中读取数据(一般是token)验证用户的登录状态,这样就不用反复登录了

pinia-plugin-persistedstate

安装插件:快速开始 | pinia-plugin-persistedstate (prazdevs.github.io)

npm i pinia-plugin-persistedstate

安装完成后可以在package.json中查看 

 注册插件:

在main.js中注册引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import {piniaPluginPersistedstate} from 'pinia-plugin-persistedstate'const app = createApp(App)
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)app.use(pinia)
app.mount('#app')

在store下创建pinia对象的文件内启用插件

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)function increment() {count.value++}return { count, doubleCount, increment }},{persist: true,//开启路由缓存},
)

 App.vue

<script setup>
import  {useCounterStore} from '@/stores/counter'const {count,increment} = useCounterStore();
increment();//action方法,使用pinia的数据
console.log(count);
</script>
<template></template>
<style scoped></style>

这个counter存储的数据就会被保留在本地了

这样每次打开执行这个自增的 方法时会先从原来保存的数据执行,而不会因为刷新内存丢失掉数据,从0开始执行

总结

        pinia是一个状态管理工具,它可以保存一个状态(数据),和一些方法,提供给给全局的组件共享。简单来说,pinia可以设置全局的响应量和方法,所有组件都可以访问到这些响应量和方法,并产生对应的变化

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

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

相关文章

大容量异步电机直接转矩(DTC)控制matlab仿真

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; DTC简介 直接转矩控制的基本思想就是利用逆变器所产生的空间电压矢量来控制定子磁链的旋转速度&#xff0c;通过控制定子磁链的走停来改变定子磁链的平均旋转速度的大小&#xff0c;从而改变磁通角的大小进而…

【应用层】域名系统DNS

目录 1、互联网的域名结构 2、域名服务器 域名系统 DNS (Domain Name System) 是互联网使用的命名系统&#xff0c;用来把便于人们使用的机器名字转换为 IP 地址&#xff0c;域名系统其实就是名字系统。 互联网的域名系统 DNS 被设计成为一个联机分布式数据库系统&#xff0c…

使用 zxing 生成二维码以及条形码

需求背景 前期在做项目的时候&#xff0c;有一个需求是说要生成一张条形码&#xff0c;并且呢将条形码插入到 excel 中去&#xff0c;但是之前一直没有搞过找个条形码或者是二维码&#xff0c;最后是做出来了&#xff0c;这里呢就先看看怎么生成&#xff0c;后面再抽时间来写写…

模拟算法专题

特点: 思路比较简单, 主要考察代码能力 模拟算法流程(一定要在演草纸上过一遍流程)把流程转化为代码 优化: 一般是通过找规律 一. 替换所有问号 答案 二. 提莫攻击 答案 三. Z字形变换 答案 四. 外观数列 答案 五. 数青蛙 答案

Accelerate 笔记:保存与加载文件

保存和加载模型、优化器、随机数生成器和 GradScaler 使用 save_state() 将上述所有内容保存到一个文件夹位置使用 load_state() 加载之前通过 save_state() 保存的状态通过使用 register_for_checkpointing()&#xff0c;可以注册自定义对象以便自动从前两个函数中存储或加载 …

css-Ant-Menu 导航菜单更改为左侧列表行选中

1.Ant-Menu导航菜单 导航菜单是一个网站的灵魂&#xff0c;用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航&#xff0c;顶部导航提供全局性的类目和功能&#xff0c;侧边导航提供多级结构来收纳和排列网站架构。 2.具体代码 html <!-- 左侧切换 --><…

每日一练——分糖果2

1103. 分糖果 II - 力扣&#xff08;LeetCode&#xff09; /*** Note: The returned array must be malloced, assume caller calls free().*/ int* distributeCandies(int candies, int num_people, int* returnSize) {int num 0;int* arr (int*)malloc(sizeof(int)*num_peo…

第100+9步 ChatGPT文献复现:ARIMA预测百日咳

基于WIN10的64位系统演示 一、写在前面 我们来继续换一篇文章来学习学习&#xff1a; 《BMC Public Health》杂志的2022年一篇题目为《ARIMA and ARIMA-ERNN models for prediction of pertussis incidence in mainland China from 2004 to 2021》文章的模拟数据做案例。 这…

Golang TCP网络编程

文章目录 网络编程介绍TCP网络编程服务器监听客户端连接服务器服务端获取连接向连接中写入数据从连接中读取数据关闭连接/监听器 简易的TCP回声服务器效果展示服务端处理逻辑客户端处理逻辑 网络编程介绍 网络编程介绍 网络编程是指通过计算机网络实现程序间通信的一种编程技术…

最小二乘法算法(个人总结版)

最小二乘法&#xff08;Least Squares Method&#xff09;是一种通过最小化误差平方和来拟合数据的回归分析方法。它被广泛应用于线性回归、多元回归以及其他数据拟合问题中。以下是详细的教程&#xff0c;涵盖基本概念、数学推导、具体步骤和实现代码。 1. 最小二乘法基本概念…

网络网络层之(6)ICMPv4协议

网络网络层之(6)ICMPv4协议 Author: Once Day Date: 2024年6月2日 一位热衷于Linux学习和开发的菜鸟&#xff0c;试图谱写一场冒险之旅&#xff0c;也许终点只是一场白日梦… 漫漫长路&#xff0c;有人对你微笑过嘛… 全系列文章可参考专栏: 通信网络技术_Once-Day的博客-CS…

基于java的CRM客户关系管理系统(六)

目录 5.3 表现层设计 5.3.1 模型层&#xff08;M&#xff09; 5.3.2 视图层&#xff08;V&#xff09; 5.3.3 控制层&#xff08;C&#xff09; 5.4 系统主要功能模块的实现 5.4.1 登录功能的实现 5.4.2 客户管理的实现 5.5 本章小结 参考文献 前面内容请移步 基于java…

2.2 OpenCV随手简记(三)

图像的阈值处理定义 &#xff1a;将图像转化为二值图像&#xff08;黑白图&#xff09;, 也可以用于彩色图形&#xff0c;达到夸张的效果 目的&#xff1a;是用来提取图像中的目标物体&#xff0c;将背景和噪声区分开&#xff08;可以近似的认为除了目标全是噪声&#xff09;。…

Java进阶学习笔记36——算法

什么是算法&#xff1f; 解决某个实际问题的过程和方法。 1&#xff09;导航&#xff1b; 2&#xff09;滴滴打车&#xff1b; 3&#xff09;抖音&#xff1b; 不同的算法&#xff0c;效率高、性能好&#xff01; 在Java中&#xff0c;代码已经帮我们写好了&#xff0c;但为…

【Go语言精进之路】构建高效Go程序:零值可用、使用复合字面值作为初值构造器

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 引言一、深入理解并利用零值提升代码质量1.1 深入Go类型零值原理1.2 零值可用性的实践与优势1.2.1 切片(Slice)的零值与动态扩展1.2.2 Map的零值与安全访问1.2.3 函数参数与零值 二、使用复合字面值作为初值构造器2.1 结构体…

C语言 链表经典OJ题

链表经典OJ题 移除链表元素链表的中间节点反转链表合并两个有序链表分割链表 移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 。 示例 1&#xff1a; 输入&#xff1a;head […

iOS18新功能大爆料,打破常规,全面升级,这些变化不容错过!

众所周知&#xff0c;苹果 iOS 操作系统近年来都没有发生重大变化&#xff0c;主要是添加小部件、锁屏编辑和手机屏幕编辑等功能&#xff0c;再加上bug偏多&#xff0c;以至于越来越多iPhone用户不愿意再升级系统了。这一点&#xff0c;从 iOS 17 明显降低的安装率中就能看出一…

Linux配置java,maven,marshalsec环境

文章目录 一. Linux配置java环境1.下载jdk文件2.解压tar.gz文件3.设置java环境变量4.验证是否成功 二. Linux配置maven环境1.下载压缩包2.解压tar.gz3. 配置环境变量 三. Linux配置marshalsec环境 一. Linux配置java环境 1.下载jdk文件 mkdir /opt/javawget https://repo.hua…

Mixly 开启WIFI AP UDP收发数据

一、开发环境 软件&#xff1a;Mixly 2.0在线版 硬件&#xff1a;ESP32-C3&#xff08;立创实战派&#xff09; 固件&#xff1a;ESP32C3 Generic(UART) 测试工工具&#xff1a;NetAssist V5.0.1 二、实现功能 ESP32开启WIFI AP&#xff0c;打印接入点IP地址&#xff0c;允许…

几百页资料要打印哪里打印便宜

在这个信息爆炸的时代&#xff0c;资料堆积如山成为了许多人的常态。无论是学生准备期末考试、论文&#xff0c;还是职场人士整理项目文档、合同&#xff0c;打印需求总是如影随形。面对厚厚的几百页资料&#xff0c;你可能会为去哪里打印既便宜又方便而犯愁。别急&#xff0c;…