Vue进阶之状态管理,解锁项目开发超能力

一、概念

状态管理是指对应用程序中状态的管理。在软件领域,状态是指在某个特定时刻,应用程序的数据和行为表现。

以一个简单的购物网站为例,购物车中的商品列表、用户的登录状态等都是状态。状态管理主要涉及这些状态如何被存储、更新和在不同组件(如果是网页或软件界面的不同部分)之间共享。

在前端开发中,像React有Redux等状态管理库Vue.js有Vuex。这些工具可以帮助开发者有效组织和控制应用中的状态,让状态的变化可以被预测,方便调试,并且在多人协作开发时也能更好地维护代码。

Pinia是一个专为Vue.js应用程序设计的状态管理库,用于替代Vuex。我们将用Pinia来讲解状态管理。

二、Pinia的优势

1. 简洁的API:无需使用mutations,通过actions就能直接修改状态,且store定义简单。

2. 良好的类型推断:对TypeScript项目友好,能自动推断类型。

3. 与组合式API完美配合:在Vue.js 3的setup函数中使用方便。

4. 支持插件扩展:可通过编写插件来定制功能。

5. 直观的状态共享:便于跨组件共享和管理状态。

三、配置

与路由管理一样先创建一个脚手架,在将要存放的文件夹里打开终端(cmd),输入pnpm create vue输入文件名,这里我们创建一个Pinia的文件。在配置脚手架相关插件时,与他们不同,我们要引入Pinia用于状态管理

与路由管理不同,Pinia主要文件多了一个叫stores的文件夹,stores文件夹中有一个counter.js的文件,里面自动生成了一个简单的计时器函数,我们接下来就使用该函数来实现页面的计数。

四、Pinia的使用

先简单的讲解一下已有代码

(1)counter.js

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 }
})

①与前面一样,从vue中引入ref和computed;这里我们还要从Pinia中导入defineStore来构建状态管理的相关内容。

②通过defineStore定义一个名为“counter”的仓库,内部有一个响应式数据count初始值为0,一个计算属性doubleCount依赖count并范围两倍的值,还有一个increment方法用于自增count的值。

③将这几个属性和方法返回供外部使用,实现了一个简单的计数相关的状态管理逻辑

(2)main.js

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

①从 vue 库中导入 createApp 用于创建 Vue 应用实例,从 pinia 导入 createPinia 用于创建 pinia 实例来管理状态。

②通过 createApp 创建 App 应用实例,接着使用 app.use(createPinia()) 将 pinia 挂载到 Vue 应用上,使得整个应用可以使用 pinia 进行状态管理,最后将应用挂载到 #app 这个 DOM 节点上。

目前两个js文件不用进行修改就可以实现计数功能。

(3)App.vue

①我们先创建一个简单的框架

<template><div class="container"></div>
</template>
<script setup>
</script><style scoped>
</style>

我们主要在template和script标签进行修改,样式大家根据需要添加即可。

②我们在<template>的div中用h3标签来展示公用数据库中count和doublecount的值(通过插值语法({{}}两个花括号)绑定对应数据),再设置一个按钮,绑定v-on:click事件来调用CounterStore.increment 方法实现点击自增操作。

<template><div class="container"><h2>我是App.vue组件</h2><h3>Pinia公用数据库里面的count为:{{ CounterStore.count }}</h3><h3>Pinia公用数据库里面的doubleCount为:{{ CounterStore.doubleCount }}</h3><button v-on:click="CounterStore.increment">点我+1(调用的是公用方法)</button></div>
</template>

后续我还要引入另一个组件,所以这里用一个h2标签“我是App.vue”来区分

③从 "./stores/counter.js" (注意路径不要写错)中导入 useCounterStore 函数,然后调用它获取到 CounterStore,这样就能在模板中方便地访问和操作 Count.js 文件里定义的状态管理仓库中的数据和方法了。

<script setup>
import { useCounterStore } from "./stores/counter.js";const CounterStore = useCounterStore();
</script>

这样一个计数器就设计好了,我再添加一点样式(不添加样式也可以)

<style scoped>
.container {width: 50%;height: 450px;background-color: pink;
}
</style>

在浏览器打开效果

count的值和doubleCount的值会随着点击的次数分别+1和x1。

这样我们也可以在该组件上再增加一个组件,这里我们在HelloWorld组件中再次引入一个计数功能。

我们可以将App.vue复制到HelloWorld.vue,只要简单的修改一下即可。

<template><div class="container1"><h2>我是App.vue组件</h2><h3>Pinia公用数据库里面的count为:{{ CounterStore.count }}</h3><h3>Pinia公用数据库里面的doubleCount为:{{ CounterStore.doubleCount }}</h3><button v-on:click="CounterStore.increment">点我+1(调用的是公用方法)</button></div>
</template>
<script setup>
import { useCounterStore } from "../stores/counter.js";const CounterStore = useCounterStore();
</script><style scoped>
.container1 {width: 50%;height: 450px;background-color: rgb(213, 139, 151);
}
</style>

注意:路径不要写错。

App.vue要引用HelloWorld组件

<template><div class="container"><h2>我是App.vue组件</h2><h3>Pinia公用数据库里面的count为:{{ CounterStore.count }}</h3><h3>Pinia公用数据库里面的doubleCount为:{{ CounterStore.doubleCount }}</h3><button v-on:click="CounterStore.increment">点我+1(调用的是公用方法)</button><HelloWorld/></div>
</template>
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import { useCounterStore } from "./stores/counter.js";const CounterStore = useCounterStore();
</script><style scoped>
.container {width: 50%;height: 450px;background-color: pink;
}
</style>

这样就可以了

五、Pinia的持久性

在现代的Vue.js应用开发中,Pinia作为状态管理库已经广受欢迎。其中,数据的持久性是一个非常重要的特性,它能确保应用在页面刷新或重新打开后,依然能够恢复之前的状态

六、为什么需要Pinia的持久性

在许多应用场景中,用户不希望自己辛苦操作得到的状态(如购物车中的商品列表、用户偏好设置等)因为页面的刷新就丢失。例如,在一个电商应用里,用户已经挑选了好几件商品放入购物车,若每次刷新页面购物车就被清空,这会极大地影响用户体验。Pinia的持久性功能就很好地解决了这个问题。

七、持久性的基本方法

1、安装

Pinia提供了插件机制来实现数据的持久存储。一个简单的实现方式是通过pinia-plugin-persistedstate插件。我们在终端输入“pnpm i pinia-plugin-persistedstate”即可。

2、将插件添加到你的Pinia实例中

在main.js(或main.ts)文件中引入Pinia和插件。首先要创建Pinia实例,如下:

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);

这样,Pinia中的所有状态都会默认被持久化存储。如果只想持久化部分状态,可以在store模块中进行配置。

这样Pinia的持久性就设置好了,详细安装教程请点击“Pinia持久性”查看。

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

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

相关文章

操作系统(16)I/O软件

前言 操作系统I/O软件是负责管理和控制计算机系统与外围设备&#xff08;例如键盘、鼠标、打印机、存储设备等&#xff09;之间交互的软件。 一、I/O软件的定义与功能 定义&#xff1a;I/O软件&#xff0c;也称为输入/输出软件&#xff0c;是计算机系统中用于管理和控制设备与主…

WPF+MVVM案例实战与特效(四十二)- 打造炫酷彩虹字体控件,让你的应用闪耀起来

文章目录 1、引言2、案例实现1、依赖属性2、代码解释3、转换器实现3、控件使用4、运行效果4、总结1、引言 在WPF 应用程序中,视觉效果往往是吸引用户注意力的关键。一个小小的字体控件,如果能够以彩虹般的色彩展示文本,不仅能让界面更加生动,还能为用户提供独特的交互体验…

游戏AI实现-寻路算法(Dijkstra)

戴克斯特拉算法&#xff08;英语&#xff1a;Dijkstras algorithm&#xff09;&#xff0c;又称迪杰斯特拉算法、Dijkstra算法&#xff0c;是由荷兰计算机科学家艾兹赫尔戴克斯特拉在1956年发现的算法。 算法过程&#xff1a; 1.首先设置开始节点的成本值为0&#xff0c;并将…

CTFshow-文件上传(Web151-170)

CTFshow-文件上传(Web151-170) 参考了CTF show 文件上传篇&#xff08;web151-170&#xff0c;看这一篇就够啦&#xff09;-CSDN博客 Web151 要求png&#xff0c;然后上传带有一句话木马的a.png&#xff0c;burp抓包后改后缀为a.php&#xff0c;然后蚁剑连接&#xff0c;找fl…

Unity超优质动态天气插件(含一年四季各种天气变化,可用于单机局域网VR)

效果展示&#xff1a;https://www.bilibili.com/video/BV1CkkcYHENf/?spm_id_from333.1387.homepage.video_card.click 在你的项目中设置enviro真的很容易&#xff01;导入包裹并按照以下步骤操作开始的步骤&#xff01; 1. 拖拽“EnviroSky”预制件&#xff08;“environme…

Windows环境下安装和使用Open Interpreter(没有OpenAI API key也可以运行)

文章目录 Open Interpreter简介安装运行本地模型运行model i退出 Open Interpreter简介 相比于其他的模型&#xff0c;Open Interpreter最大的亮点就是能够在模型上直接自动运行和调试代码。而其他的模型则需要在生成代码之后&#xff0c;复制到对应的本地IDE上运行、调试。如…

Python列表推导式:嵌套用法详解

Python列表推导式&#xff1a;嵌套用法详解 1. 什么是列表推导式&#xff1f;举个例子&#xff1a; 2. 什么是嵌套列表推导式&#xff1f;举个例子&#xff1a; 3. 嵌套列表推导式的语法再来一个例子&#xff1a; 4. 嵌套列表推导式的高级用法4.1 生成矩阵4.2 过滤嵌套列表4.3 …

Ubuntu如何下载nvidia驱动和Cuda Toolkit

Ubuntu如何下载nvidia驱动和Cuda Toolkit 前言 ‍ 手快不小心把 nvidia​ 的某个东西删除了&#xff0c;现在不得不全部卸载后再重新安装了。 我再也不敢在不确认内容的情况下&#xff0c;确认删除了… ‍ Note: ‍ 笔者环境为 Ubuntu 24.04LTS​ ‍ ‍ 目录 ‍ 文章…

Ubuntu系统安装MySQL

使用在线方式安装 更新软件包 sudo apt update安装MySQL服务器 # 查看可使用的安装包 sudo apt search mysql-server安装指定版本的MySQL # 安装指定版本 sudo apt install -y mysql-server-8.0如果不加-y 会在安装过程中&#xff0c;系统将提示你设置MySQL的root密码。记住…

最大质因子序列

最大质因子序列 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 任意输入两个正整数m, n (1 < m < n < 5000)&#xff0c;依次输出m到n之间每个数的最大质因子&#xff08;包括m和n&#xff1b;…

C语言中信号量:<semaphore.h>头文件

<semaphore.h> 是一个 POSIX 标准定义的头文件&#xff0c;用于提供信号量&#xff08;semaphore&#xff09;的接口。信号量是用于线程或进程间同步的一种机制&#xff0c;可以控制访问共享资源的线程数目&#xff0c;广泛应用于多线程和多进程编程。 本文将详细介绍 &…

Netcat:网络中的瑞士军刀

免责声明&#xff1a;使用本教程或工具&#xff0c;用户必须遵守所有适用的法律和法规&#xff0c;并且用户应自行承担所有风险和责任。 文章目录 一、引言二、简述三、Netcat功能&#xff1f;四、参数选项五、Netcat 的常见功能六、高级用法多连接处理创建简单的代理 七、Netc…

GhostRace: Exploiting and Mitigating Speculative Race Conditions-记录

文章目录 论文背景Spectre-PHT&#xff08;Transient Execution &#xff09;Concurrency BugsSRC/SCUAF和实验条件 流程Creating an Unbounded UAF WindowCrafting Speculative Race ConditionsExploiting Speculative Race Conditions poc修复 论文 https://www.usenix.org/…

Spring Boot 中使用 Mybatis Plus

Spring Boot 中使用 Mybatis Plus 在现代的企业级开发中&#xff0c;MyBatis Plus 是 MyBatis 的增强工具&#xff0c;它简化了很多常见的数据库操作。通过 Spring Boot 集成 MyBatis Plus&#xff0c;可以快速构建高效、简洁的数据库操作层。本文将介绍如何在 Spring Boot 项…

LeetCode:209. 长度最小的子数组(滑动窗口 Java)

目录 209. 长度最小的子数组 题目描述&#xff1a; 实现原理与解析&#xff1a; 滑动窗口 原理思路&#xff1a; 209. 长度最小的子数组 题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的…

【SpringBoot 调度任务】

在 Spring Boot 中实现调度任务&#xff08;Scheduled Tasks&#xff09;&#xff0c;通过使用 EnableScheduling 和 Scheduled 注解来完成。 添加依赖启用调度任务支持创建调度任务运行应用程序 添加依赖 pom.xml 文件中有以下依赖项&#xff1a; <dependency><gro…

MyBatis接口绑定的实现方式

MyBatis 提供了几种将 SQL 语句与接口方法绑定的方式&#xff0c;以下是一些常见的实现方式&#xff1a; 1. XML 配置文件方式 这是 MyBatis 最传统的接口绑定方式&#xff0c;通过 XML 配置文件来定义 SQL 语句和接口方法之间的映射关系。 实现步骤&#xff1a; 定义一个 Mapp…

VTK智能指针

文章目录 一、VTK中的New函数二、引用计数三、VTK中的智能指针四、运行时类型识别 一、VTK中的New函数 在 VTK&#xff08;Visualization Toolkit&#xff09;中&#xff0c;New() 函数是创建 VTK 对象的主要方式。它是每个 VTK 类的一个静态方法&#xff0c;专门用于分配和初…

ai绘图丨中国新年春节背景第一弹(附关键词

一、引言 随着春节的临近&#xff0c;节日的氛围愈发浓厚。在电商、社交媒体宣传或者个人创作等诸多场景中&#xff0c;一张精美的中国新年春节背景图都能为作品增色不少。如今&#xff0c;借助 AI 绘图技术&#xff0c;我们能够轻松地创作出独具特色的春节背景图。本文将以 “…

计算机学习

不要只盯着计算机语言学习&#xff0c;你现在已经学习了C语言和Java&#xff0c;暑假又规划学习Python&#xff0c;最后你掌握的就是计算机语言包而已。 2. 建议你找一门想要深挖的语言&#xff0c;沿着这个方向继续往后学习知识就行。计算机语言是学不完的&#xff0c;而未来就…