【Vue3+Pinia】Vue新一代状态管理器Pinia

news2024/11/27 5:30:23

在这里插入图片描述

✨✨ 欢迎大家来到景天科技苑✨✨

🎈🎈 养成好习惯，先赞后看哦~🎈🎈

🏆 作者简介：景天科技苑
🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。
🏆《博客》：Python全栈，Golang开发，云原生开发，前后端框架，PyQt5和Tkinter桌面开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，云原生K8S集群搭建与管理，linux，shell脚本等实操经验，网站搭建，数据库等分享。

所属的专栏：前端零基础，实战进阶教学
景天的主页：景天科技苑

文章目录

  • Vue状态管理Pinia
    • 一、Pinia简介
    • 二、安装Pinia
    • 三、创建Pinia Store
    • 四、在Vue应用中使用Pinia
    • 五、在组件中使用Pinia Store
    • 六、使用组合式API和Pinia
    • 七、Pinia的高级用法
    • 八、最佳实践
    • 九、结论

Vue状态管理Pinia

Pinia是Vue.js的官方状态管理库，旨在提供Vuex的替代方案，但更加简洁和类型安全。本文将结合实际案例，详细介绍如何在Vue项目中使用Pinia进行状态管理。

一、Pinia简介

Pinia最初是作为Vuex的替代方案而设计的，旨在提供一种更简洁、更易于理解和维护的状态管理方式。Pinia的设计灵感来源于Vue的组合式API（Composition API），它允许开发者以更灵活的方式组织代码。

Pinia的核心特性包括：

  • 类型安全：Pinia提供了对TypeScript的全面支持，使得开发者能够享受到类型推断和自动补全等高级功能。
  • 简洁的API：Pinia的API设计简洁明了，易于学习和使用。
  • 模块化：Pinia支持将状态划分为多个模块，每个模块都可以独立地管理自己的状态、getter和action。
  • 插件支持：Pinia提供了插件机制，允许开发者扩展其功能。

二、安装Pinia

首先，你需要在Vue项目中安装Pinia。你可以使用npm或yarn进行安装。

npm install pinia
# 或者
yarn add pinia

三、创建Pinia Store

在你的Vue 3应用中，你需要创建一个Pinia Store来管理状态。一个Pinia Store类似于Vuex的store，但更加简洁和易用。你可以使用defineStore函数来定义一个Store。

以下是一个简单的示例，创建一个名为counterStore的Store，用于管理一个计数器的状态。

// src/store/counterStore.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
});

在这个示例中，我们定义了一个名为counter的Store，它包含一个状态count，以及两个操作这个状态的方法increment和decrement。

四、在Vue应用中使用Pinia

在你的Vue 3应用中，你需要创建一个Pinia实例并将其添加到应用中。

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);
const pinia = createPinia();

app.use(pinia);
app.mount('#app');

在这段代码中，我们首先引入了createPinia函数，并使用它创建了一个Pinia实例。然后，我们将这个实例作为插件使用在了Vue应用中。这样，Pinia就被成功集成到了我们的Vue项目中。

五、在组件中使用Pinia Store

现在，我们可以在Vue组件中使用Pinia Store来访问和修改状态。

以下是一个简单的示例，展示如何在组件中使用counterStore。

<!-- src/components/Counter.vue -->
<template>
  <div>
    <h1>Counter: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useCounterStore } from '../store/counterStore';

export default defineComponent({
  setup() {
    const counterStore = useCounterStore();
    const { count, increment, decrement } = counterStore;

    return { count, increment, decrement };
  },
});
</script>

<style scoped>
/* 添加一些样式以美化组件 */
button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

在这个示例中，我们导入了useCounterStore钩子，并在setup函数中使用它来获取counterStore的实例。然后，我们将count、increment和decrement从counterStore中解构出来，并返回给模板中使用。

现在，运行你的Vue应用，你应该能够在页面上看到一个计数器，以及两个按钮用于增加和减少计数器的值。点击这些按钮，你会发现计数器的值会相应地增加或减少。

六、使用组合式API和Pinia

Pinia与Vue 3的组合式API（Composition API）完美集成，使得状态管理更加灵活和强大。

以下是一个更复杂的示例，展示如何在组件中使用组合式API和Pinia来管理用户信息。

// src/store/userStore.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useUserStore = defineStore('user', () => {
  const username = ref('Guest');
  const email = ref('');

  const setUsername = (newUsername) => {
    username.value = newUsername;
  };

  const setEmail = (newEmail) => {
    email.value = newEmail;
  };

  return {
    username,
    email,
    setUsername,
    setEmail,
  };
});

在这个示例中，我们定义了一个名为user的Store，它包含两个状态username和email，以及两个操作这些状态的方法setUsername和setEmail。

然后，我们在组件中使用这个Store来管理用户信息。

<!-- src/components/UserForm.vue -->
<template>
  <div>
    <h1>User Information</h1>
    <p>Username: {{ username }}</p>
    <p>Email: {{ email }}</p>
    <input type="text" v-model="newUsername" @keydown.enter="updateUsername" placeholder="Enter new username" />
    <input type="email" v-model="newEmail" @keydown.enter="updateEmail" placeholder="Enter new email" />
    <button @click="updateUsername">Update Username</button>
    <button @click="updateEmail">Update Email</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useUserStore } from '../store/userStore';

export default defineComponent({
  setup() {
    const userStore = useUserStore();
    const newUsername = ref('');
    const newEmail = ref('');

    const updateUsername = () => {
      userStore.setUsername(newUsername.value);
      newUsername.value = ''; // 清空输入框
    };

    const updateEmail = () => {
      userStore.setEmail(newEmail.value);
      newEmail.value = ''; // 清空输入框
    };

    return {
      username: userStore.username,
      email: userStore.email,
      newUsername,
      newEmail,
      updateUsername,
      updateEmail,
    };
  },
});
</script>

<style scoped>
/* 添加一些样式以美化组件 */
input {
  margin: 10px 0;
  padding: 10px;
  font-size: 16px;
}

button {
  margin: 10px 5px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

在这个示例中，我们导入了useUserStore钩子，并在setup函数中使用它来获取userStore的实例。然后，我们定义了newUsername和newEmail两个响应式引用，用于绑定输入框的值。同时，我们定义了updateUsername和updateEmail两个方法，用于更新用户信息。

在模板中，我们使用v-model指令将输入框的值绑定到newUsername和newEmail上，并使用@keydown.enter事件监听回车键的按下事件，以便在按下回车键时调用更新方法。同时，我们也提供了两个按钮用于手动更新用户信息。

现在，运行你的Vue应用，你应该能够在页面上看到一个用户信息表单，你可以通过输入框和按钮来更新用户信息。

七、Pinia的高级用法

除了基本的状态管理功能外，Pinia还提供了一些高级用法，如持久化状态、模块化Store等。

1. 持久化状态

在实际应用中，你可能希望将某些状态持久化到本地存储（如localStorage或sessionStorage）中，以便在页面刷新或关闭后仍然能够保留这些状态。Pinia可以通过插件机制来实现这一功能。

例如，你可以使用pinia-plugin-persistedstate插件来持久化状态：

npm install pinia-plugin-persistedstate
# 或者
yarn add pinia-plugin-persistedstate

然后，在你的入口文件中注册这个插件：

import { createApp } from 'vue';
import App from './App.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定义中指定要持久化的状态：

// store/counter.js
import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    // 其他需要持久化的状态...
  }),
  // 其他getter和action...
  persist: true, // 启用持久化
});

2. 模块化Store

随着应用规模的扩大，你可能需要将状态划分为多个模块来管理。Pinia支持通过创建多个Store来实现模块化状态管理。

例如，你可以创建一个用于管理用户信息的Store和一个用于管理商品信息的Store：

// store/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    name: 'John Doe',
    age: 30,
    // 其他用户信息...
  }),
  // 其他getter和action...
});

// store/products.js
import { defineStore } from 'pinia';

export const useProductsStore = defineStore('products', {
  state: () => ({
    products: [],
    // 其他商品信息...
  }),
  // 其他getter和action...
});

然后，在你的组件中分别导入并使用这些Store：

<template>
  <div>
    <h1>User Information</h1>
    <p>Name: {{ userName }}</p>
    <p>Age: {{ userAge }}</p>

    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.id">{{ product.name }}</li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useUserStore } from './store/user';
import { useProductsStore } from './store/products';

export default defineComponent({
  setup() {
    const userStore = useUserStore();
    const productsStore = useProductsStore();

    return {
      userName: userStore.name,
      userAge: userStore.age,
      products: productsStore.products,
    };
  },
});
</script>

八、最佳实践

在使用Pinia进行状态管理时，以下是一些最佳实践建议：

  1. 保持Store的单一职责：每个Store应该只负责一个特定的状态领域，以保持其简单和可维护性。
  2. 避免在Store中进行复杂计算：将复杂的计算逻辑放在getter中，而不是在action中。这有助于保持action的简洁和可测试性。
  3. 使用TypeScript进行类型检查：Pinia提供了对TypeScript的全面支持，利用这一点可以帮助你避免类型错误和潜在的问题。
  4. 将Store注册到Vue实例中：在创建Vue实例时，通过app.use(pinia)将Pinia实例注册到Vue实例中，以确保全局状态管理的正确性。
  5. 持久化敏感数据：对于需要持久化的敏感数据（如用户登录信息），请确保在持久化前进行适当的加密和安全性检查。

九、结论

Pinia是一个强大而灵活的Vue状态管理库，它提供了简洁的API、类型安全和模块化等特性，使得开发者能够更轻松地管理和共享应用的状态。通过本文的介绍和实际案例，相信你已经对Pinia有了更深入的了解，并能够将其应用到自己的Vue项目中。

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

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

相关文章

【消息序列】详解(7)：剖析回环模式--设备测试的核心利器

【消息序列】详解(7)：剖析回环模式--设备测试的核心利器

目录 一、概述 1.1. 本地回环模式 1.2. 远程环回模式 二、本地回环模式&#xff08;Local Loopback mode&#xff09; 2.1. 步骤 1&#xff1a;主机进入本地环回模式 2.2. 本地回环测试 2.2.1. 步骤 2a&#xff1a;主机发送HCI数据包并接收环回数据 2.2.2. 步骤 2b&…
阅读更多...
大厂也在用的分布式链路追踪：TraceIdFilter + MDC + Skywalking

大厂也在用的分布式链路追踪：TraceIdFilter + MDC + Skywalking

痛点 查线上日志时&#xff0c;同一个 Pod 内多线程日志交错&#xff0c;很难追踪每个请求对应的日志信息。 日志收集工具将多个 Pod 的日志收集到同一个数据库中后&#xff0c;情况就更加混乱不堪了。 解决 TraceId MDC 前端每次请求时&#xff0c;添加 X-App-Trace-Id 请…
阅读更多...
leetcode - 2116. Check if a Parentheses String Can Be Valid

leetcode - 2116. Check if a Parentheses String Can Be Valid

Description A parentheses string is a non-empty string consisting only of ‘(’ and ‘)’. It is valid if any of the following conditions is true: It is ().It can be written as AB (A concatenated with B), where A and B are valid parentheses strings.It ca…
阅读更多...
如何启动 Docker 服务：全面指南

如何启动 Docker 服务：全面指南

如何启动 Docker 服务：全面指南 一、Linux 系统（以 Ubuntu 为例）二、Windows 系统（以 Docker Desktop 为例）三、macOS 系统（以 Docker Desktop for Mac 为例）四、故障排查五、总结Docker，作为一种轻量级的虚拟化技术，已经成为开发者和运维人员不可或缺的工具。它允许用…
阅读更多...
安装MySQL服务

安装MySQL服务

安装版本MySQL8的安装包 安装界面 在这里选择MySQL中的Server only 只安装服务器端 如果选择custom需要如下图 进入配置导向&#xff0c;点击ready to configure&#xff0c;点击next即可 采用默认形式 执行成功后&#xff0c;会出现自动选择项 点击next然后再点击Finish 启动…
阅读更多...
第六届国际科技创新学术交流大会暨新能源科学与电力工程国际（NESEE 2024）

第六届国际科技创新学术交流大会暨新能源科学与电力工程国际（NESEE 2024）

重要信息 会议官网&#xff1a;nesee.iaecst.org 会议时间&#xff1a;2024年12月6-8日 会议地点&#xff1a; 中国-广州&#xff08;越秀国际会议中心) 大会简介 新能源科学与电力工程国际学术会议&#xff08;NESEE 2024&#xff09;作为第六届国际科技创新学术交流大会分…
阅读更多...
Windows安装nacos

Windows安装nacos

目录 一、下载 二、运行 三、运行失败 四、运行成功 一、下载 下载链接: Nacos Server 下载 | Nacos 官网 解压: 二、运行 进入nacos/bin, 运行startup.cmd 三、运行失败 如果出现黑窗口一闪而过, 说明失败了, 可能原因如下: ① 环境变量: 需要 JAVA_HOME 为 JDK8 ②…
阅读更多...
Rust Newtype模式（通过结构体封装现有类型来创建新的类型）（单字段结构体，通过.0访问）模式匹配、解构、DerefMut

Rust Newtype模式（通过结构体封装现有类型来创建新的类型）（单字段结构体，通过.0访问）模式匹配、解构、DerefMut

文章目录 深入理解Rust中的Newtype模式什么是Newtype模式&#xff1f;Newtype模式的基本形式Newtype的访问访问 Newtype 的值1. 通过 .0 访问字段2. 通过方法访问3. 通过模式匹配&#xff08;解构&#xff09;访问 总结 Newtype模式的应用场景1. 类型安全2. 增强可读性3. 定制化…
阅读更多...
网络层协议IP

网络层协议IP

对于网络层我们直接通过IP协议来了解其内容 一.IP协议 首先我们先来了解几个概念&#xff1a; 主机&#xff1a;配有IP地址&#xff0c;但是不进行路由控制的设备 路由器&#xff1a;配有IP地址&#xff0c;同时进行路由控制的设备 节点&#xff1a;主机和路由器的统称 所以现在…
阅读更多...
Qt界面篇：QMessageBox高级用法

Qt界面篇：QMessageBox高级用法

1、演示效果 2、用法注意 2.1 设置图标 用于显示实际图标的pixmap取决于当前的GUI样式。也可以通过设置icon pixmap属性为图标设置自定义pixmap。 QMessageBox::Icon icon(
阅读更多...
【强化学习的数学原理】第02课-贝尔曼公式-笔记

【强化学习的数学原理】第02课-贝尔曼公式-笔记

学习资料&#xff1a;bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接&#xff1a;强化学习的数学原理 西湖大学 赵世钰 文章目录 一、为什么return重要&#xff1f;如何计算return&#xff1f;二、state value的定义三、Bellman公式的详细推导四、公式向量形式…
阅读更多...
【数据结构实战篇】用C语言实现你的私有队列

【数据结构实战篇】用C语言实现你的私有队列

&#x1f3dd;️专栏&#xff1a;【数据结构实战篇】 &#x1f305;主页&#xff1a;f狐o狸x 在前面的文章中我们用C语言实现了栈的数据结构&#xff0c;本期内容我们将实现队列的数据结构 一、队列的概念 队列&#xff1a;只允许在一端进行插入数据操作&#xff0c;在另一端…
阅读更多...
实战项目负载均衡式在线 OJ

实战项目负载均衡式在线 OJ

> 作者&#xff1a;დ旧言~ > 座右铭&#xff1a;松树千年终是朽&#xff0c;槿花一日自为荣。 > 目标&#xff1a;能自己实现负载均衡式在线 OJ。 > 毒鸡汤&#xff1a;有些事情&#xff0c;总是不明白&#xff0c;所以我不会坚持。早安! > 专栏选自&#xff1…
阅读更多...
银河麒麟桌面系统——桌面鼠标变成x，窗口无关闭按钮的解决办法

银河麒麟桌面系统——桌面鼠标变成x，窗口无关闭按钮的解决办法

银河麒麟桌面系统——桌面鼠标变成x&#xff0c;窗口无关闭按钮的解决办法 1、支持环境2、详细操作说明步骤1&#xff1a;用root账户登录电脑步骤2&#xff1a;导航到kylin-wm-chooser目录步骤3&#xff1a;编辑default.conf文件步骤4&#xff1a;重启电脑 3、结语 &#x1f49…
阅读更多...
数据结构--AVL树(平衡二叉树)

数据结构--AVL树(平衡二叉树)

✅博客主页:爆打维c-CSDN博客​​​​​​ &#x1f43e; &#x1f539;分享c、c知识及代码 &#x1f43e; &#x1f539;Gitee代码仓库 五彩斑斓黑1 (colorful-black-1) - Gitee.com 一、AVL树是什么&#xff1f;&#xff08;含义、性质&#xff09; 1.AVL树的概念 AVL树是最…
阅读更多...
【Unity How】如何让物体跟随平台移动或旋转？

【Unity How】如何让物体跟随平台移动或旋转？

先看下最终要实现的效果&#xff1a; 当查找这个问题的资料时&#xff0c;发现多数的方案都是将物体设置为平台的子对象。 但是如果平台是非均匀缩放时&#xff0c;物体在移动或旋转时就会发生变形。 参考&#xff1a;Unity中父对象是非均匀缩放时出现倾斜或剪切现象 那有没有…
阅读更多...
C语言函数递归经典题型——汉诺塔问题

C语言函数递归经典题型——汉诺塔问题

一.汉诺塔问题介绍 Hanoi&#xff08;汉诺&#xff09;塔问题。古代有一个梵塔&#xff0c;塔内有3个座A、B、C&#xff0c;开始时&#xff21;座上有64个盘子&#xff0c;盘子大小不等&#xff0c;大的在下&#xff0c;小的在上。有一个老和尚想把这64个盘子从&#xff21;座移…
阅读更多...
Unity中动态生成贴图并保存成png图片实现

Unity中动态生成贴图并保存成png图片实现

实现原理&#xff1a; 要生成长x宽y的贴图&#xff0c;就是生成x*y个像素填充到贴图中&#xff0c;如下图&#xff1a; 如果要改变局部颜色&#xff0c;就是从x1到x2(x1<x2),y1到y2(y1<y2)这个范围做处理&#xff0c; 或者要想做圆形就是计算距某个点&#xff08;x1,y1&…
阅读更多...
vue3封装Element Plus table表格组件

vue3封装Element Plus table表格组件

支持绝大部分Element Plus原有设置属性&#xff0c;支持分页&#xff0c;支持动态适配高度 效果展示 组件代码&#xff1a; <template><div class"table-wrap" ref"tableWrap"><el-tableclass"w100 h100":data"tableInfo.…
阅读更多...
ElasticSearch学习篇18_《检索技术核心20讲》LevelDB设计思想

ElasticSearch学习篇18_《检索技术核心20讲》LevelDB设计思想

目录 一些常见的设计思想以及基于LSM树的LevelDB是如何利用这些设计思想优化存储、检索效率的。 几种常见的设计思想 索引和数据分离减少磁盘IO读写分离分层思想 LevelDB的设计思想 读写分离设计分层设计与延迟合并LRU缓存加速检索 几种常见设计思想 索引与数据分离 索引…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023