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;是计算机系统中用于管理和控制设备与主…

游戏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上运行、调试。如…

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

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/…

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;而未来就…

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现

鸿蒙项目云捐助第七讲鸿蒙App应用的首页推荐模块布局的实现 最后设置首页的推荐模块&#xff0c;参考模板如下图所示。 一、首页热门推荐模块的实现 对于热门推荐模块&#xff0c;先有上面的小标题栏&#xff0c;这里的标题栏也有一个小图标&#xff0c;首先从“百度图库”中…

电子应用设计方案-58:智能沙发系统方案设计

智能沙发系统方案设计 一、引言 智能沙发作为一种融合了舒适与科技的家居产品&#xff0c;旨在为用户提供更加便捷、舒适和个性化的体验。本方案将详细介绍智能沙发系统的设计思路和功能实现。 二、系统概述 1. 系统目标 - 实现多种舒适的姿势调节&#xff0c;满足不同用户的…

【vue-codemirror】Vue中强大的编辑器插件--vue-codemirror

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

Linux下学【MySQL】所有常用类型详解( 配实操图 通俗易懂 )

每日激励&#xff1a;“当你觉得你会幸运时&#xff0c;幸运就会眷顾你&#xff0c;所以努力吧&#xff0c;只要你把事情做好&#xff0c;并觉得你会幸运&#xff0c;你将会变得幸运且充实。” 绪论​&#xff1a; 本章继续学习MySQL的知识&#xff0c;本章主要讲到mysql中的所…

你了解网络层的 ICMP 吗?

你了解网络层的 ICMP 吗&#xff1f; 一. 什么是 ICMP二. ICMP 的工作原理三. ICMP 的结构四. ICMP 的常见应用五. ICMP 的局限性与安全性六. 总结 前言 这是我在这个网站整理的笔记,有错误的地方请指出&#xff0c;关注我&#xff0c;接下来还会持续更新。 作者&#xff1a;神…

uniapp使用百度地图配置了key,但是显示Map key not configured

搞了我两天的一个问题。 hbuilderx版本&#xff1a;4.36 问题介绍&#xff1a; 我的项目是公司的项目&#xff0c;需要在H5端使用百度地图&#xff0c;使用vue-cli创建的uniapp&#xff0c;就是uni代码在src里的目录结构。就是使用这种方式才会遇到这个问题。 问题原因&#xf…

【Qt】drawText字体大小问题探究

背景 软件的一个功能是&#xff1a; 打开图片在图片上绘制序号&#xff0c;序号的样式是圆圈内包含数字将带有序号的图片打印出来 实现思路也很简单&#xff0c;在屏幕上显示时重写paintEvent函数&#xff0c;利用QPainter完成图片和序号的绘制。打印时只需要将QPainter对应…

Win11安装安卓子系统WSA

文章目录 简介一、启用Hyper-V二、安装WSA三、安装APKAPK商店参考文献 简介 WSA&#xff1a;Windows Subsystem For Android 一、启用Hyper-V 控制面板 → 程序和功能 → 启用或关闭 Windows 功能 → 勾选 Hyper-V 二、安装WSA 进入 Microsoft Store&#xff0c;下拉框改为 …