Pinia在vue项目中的使用

news/2024/12/22 15:28:44/

Pinia是Vue 3官方推荐的状态管理模式,由尤雨溪创建并集成到了 Vue.js 中,它是一个轻量级、纯粹基于函数的思想实现的应用状态管理库。Pinia的设计理念类似于Redux,但它更简单易用,更适合于小型到中型的单文件组件应用。

在Vue 3项目中使用Pinia,主要有以下几个步骤:

1. 安装:通过npm或yarn安装`pinia`库:

npm install pinia vue

2. 创建store:在项目中创建一个名为store.js的文件,声明store实例并定义state、getters、actions和mutations:
   ```javascript
 

  import { createStore } from 'pinia';export const store = createStore({state() {// 定义初始状态return {count: 0,};},getters: {getCount(state) {return state.count;}},actions: {increment(context) {context.commit('increment');}},mutations: {increment(state) {state.count++;}}});


   ```

3. 使用store:在需要的地方注入store,并访问其中的数据:
   ```html
 

 <script setup>import { useStore } from '@pinia/core';const store = useStore();function handleClick() {store.increment();}</script><button @click="handleClick">Increment</button><p>{{ store.getCount() }}</p>


   ```

4. 提供插件支持:Pinia可以方便地与其他Vue插件配合使用,如Vuex Router Integration等。

pinia文档


http://www.ppmy.cn/news/1474095.html

相关文章

数据库(表)

要求如下&#xff1a; 一&#xff1a;数据库 1&#xff0c;登录数据库 mysql -uroot -p123123 2&#xff0c;创建数据库zoo create database zoo; Query OK, 1 row affected (0.01 sec) 3&#xff0c;修改字符集 mysql> use zoo;---先进入数据库zoo Database changed …

设计模式7-装饰模式

设计模式7-装饰模式 写在前面动机模式定义结构代码推导原始代码解决问题分析 选择装饰模式的理由1. 职责分离&#xff08;Single Responsibility Principle&#xff09;2. 动态扩展功能3. 避免类爆炸4. 开闭原则&#xff08;Open/Closed Principle&#xff09;5. 更好的组合复用…

Linux多进程和多线程(五)进程间通信-消息队列

多进程(五) 进程间通信 消息队列 ftok()函数创建消息队列 创建消息队列示例 msgctl 函数示例:在上⼀个示例的基础上&#xff0c;加上删除队列的代码 发送消息 示例: 接收消息示例 多进程(五) 进程间通信 消息队列 消息队列是一种进程间通信机制&#xff0c;它允许两个或多个…

6、Redis系统-数据结构-05-整数

五、整数集合&#xff08;Intset&#xff09; 整数集合是 Redis 中 Set 对象的底层实现之一。当一个 Set 对象只包含整数值元素&#xff0c;并且元素数量不大时&#xff0c;就会使用整数集合这个数据结构作为底层实现。整数集合通过紧凑的内存布局和升级机制&#xff0c;实现了…

Linux Vim基础教程

Linux Vim 简单教程&#xff1a; 一、安装与启动 Vim 首先&#xff0c;确保你的 Linux 系统已经安装了 Vim。在大多数 Linux 发行版中&#xff0c;你可以通过包管理器来安装 Vim。以下是在不同发行版中安装 Vim 的命令&#xff1a; Ubuntu/Debian: sudo apt-get install vimF…

C# Winform PropertyGrid显示中文

主要原理是在枚举上添加DescriptionAttribute属性&#xff0c;然后通过反射将其显示出来 方法1&#xff1a;继承StringConverter类 public class EnumConvertor : StringConverter {public override bool GetStandardValuesSupported(ITypeDescriptorContext context){return…

Android SurfaceFlinger——创建EGLSurface(二十三)

我们知道 EGL 就是适配 Android 本地窗口系统和 OpenGL ES 的桥接层,OpenGL ES 定义了平台无关的 GL 绘图指令,EGL 则定义了控制 Displays、Contexts 以及 Surfaces 的统一的平台接口。前面我们已经介绍了 Surface 的相关内容,而对于 EGL 来说同样存在一个与之对应的 Surfac…

2005-2023年各省居民人均消费支出、城镇居民人均消费支出、农村居民人均消费支出数据(无缺失)

2005-2023年各省居民人均消费支出、城镇居民人均消费支出、农村居民人均消费支出数据&#xff08;无缺失&#xff09; 1、时间&#xff1a;2005-2023年 2、来源&#xff1a;国家统计局、统计年鉴 3、范围&#xff1a;31省 4、指标&#xff1a;全体居民人均消费支出、城镇居…