当前位置: 首页 > news >正文

手写VUE后台管理系统5 - 整合状态管理组件pinia

整合状态管理组件

      • 安装
      • 整合
        • 创建实例
        • 挂载
        • 使用


在这里插入图片描述

pinia 是一个拥有组合式 API 的 Vue 状态管理库。
pinia 官方文档:https://pinia.vuejs.org/zh/introduction.html


安装

yarn add pinia

整合

所有与状态相关的文件都放置于项目 src/store 目录下,方便管理

src 下创建目录 store,目录设计如下:

  • index.ts:创建 pinia 实例
  • modules:状态管理目录,所以的状态文件统一放置于该目录下
创建实例

创建 index.ts 文件,内容如下

import { createPinia } from 'pinia'const store = createPinia()export default store
挂载

main.ts 文件中进行挂载

import { createApp } from 'vue'
import App from './App.vue'
import store from '@/store'const app = createApp(App)
app.use(store)
app.mount('#app')
使用

定义Store

pinia 通过 defineStore 函数进行定义,第一个参数是名称,名称必须保持唯一,第二个参数有两种实现方法:Option 对象及 Setup 函数,接下来将分别介绍这两种方式如何实现定义。

  • Option Store

简单的理解:state 用于定义状态对象,getters 相当于 computed 计算属性,actions 相当于方法

import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),getters: {double: (state) => state.count * 2,},actions: {increment() {this.count++},},
})
  • Setup Store

setup 函数更像 vue 的组合式函数,在函数中可以定义响应式属性、方法等,最后返回一个需要暴露出去的属性和方法的对象。

  • ref 定义状态对象,对应 Option 模式的 state
  • computed 定义计算属性,对应 Option 模式的 getters
  • function 定义方法,对应 Option 模式的 actions
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count = ref(0)function increment() {count.value++}return { count, increment }
})

使用Store

状态对象及计算属性需要使用 storeToRefs 方法进行提取,以保持及响应性,而方法则可以直接调用

const counterStore = useCounterStore()
const { count } = storeToRefs(counterStore)
counterStore.increment()

相关文章:

手写VUE后台管理系统5 - 整合状态管理组件pinia

整合状态管理组件 安装整合创建实例挂载使用 pinia 是一个拥有组合式 API 的 Vue 状态管理库。 pinia 官方文档:https://pinia.vuejs.org/zh/introduction.html 安装 yarn add pinia整合 所有与状态相关的文件都放置于项目 src/store 目录下,方便管理 在…...

解决webpack打包生成gz格式css/js文件没法在nginx使用的问题--全网唯一正确

本文绝对是全网解决这个问题唯一正确的文章,没有之一! 很多人都说开启nginx gzip压缩,这些人完全是胡说八道!你们到底懂不懂叫gzip压缩啊?! 不信你就试试,如果css/js只有gz文件,ng…...

传统算法: Pygame 实现快速排序

使用 Pygame 模块实现了快速排序的动画演示。首先,它生成一个包含随机整数的数组,并通过 Pygame 在屏幕上绘制这个数组的条形图。接着,通过快速排序算法对数组进行排序,动画效果可视化每一步的排序过程。在排序的过程中,程序选择一个基准元素(pivot),将数组分成两部分,…...

HarmonyOS入门开发(三) 持久化存储Preferences

接入鸿蒙几天以来,发现各种和Android不一样的地方,今天来看一下Preferences存储 在Android中比如有ShardPreferences、Mmkv这些持久化存储方式,开发起来很方便,读取速度也很快,在鸿蒙里面也提供了对应的持久化存储方案…...

类和对象——(3)再识对象

归纳编程学习的感悟, 记录奋斗路上的点滴, 希望能帮到一样刻苦的你! 如有不足欢迎指正! 共同学习交流! 🌎欢迎各位→点赞 👍 收藏⭐ 留言​📝 你说那里有你的梦想,…...

【UGUI】实现背包的常用操作

1. 添加物品 首先,你需要一个包含物品信息的类,比如 InventoryItem: using UnityEngine;[CreateAssetMenu(fileName "NewInventoryItem", menuName "Inventory/Item")] public class InventoryItem : ScriptableObje…...

单机zk安装与zk四字命令

一、下载 Apache ZooKeeper可以在 Linux 系统中使用 wget 命令直接下载,官网地址 Apache ZooKeeper 二、解压 tar -zxvf apache-zookeeper-3.8.3-bin.tar.gz 进去解压的目录中, 进入到 zk 解压目录的 conf 目录,复制 zoo_sample.cfg 文件&a…...

matlab导入excel数据两种常见的方法

在MATLAB中导入Excel数据,你可以使用几种不同的方法。下面是两种常见的方法: 方法一:使用readtable函数 readtable函数允许你导入Excel文件中的数据,并将其存储为表格。 % 指定文件路径 filename C:\your\path\to\file.xlsx;%…...

华为全屋智能5.0,无为而“智”

在赖特西塔里埃森混凝土墙的中心壁龛里,一块铜牌上刻着一些英文,意思是“建筑的意义不是屋顶和墙,而是人们生活于其中的空间”。 这句话,取自老子《道德经》中的“凿户牖以为室,当其无,有室之用”。 《理想…...

Flask 实现Token认证机制

在Flask框架中,实现Token认证机制并不是一件复杂的事情。除了使用官方提供的flask_httpauth模块或者第三方模块flask-jwt,我们还可以考虑自己实现一个简易版的Token认证工具。自定义Token认证机制的本质是生成一个令牌(Token)&…...

MATLAB 和 Simulink 官方文档下载地址

MATLAB 官方文档中文版下载网址: https://ww2.mathworks.cn/help/pdf_doc/matlab/index.html 如图: MATLAB 官方文档英文版下载网址: https://ww2.mathworks.cn/help/pdf_doc/matlab/index.html?langen 如图: Simulink 官…...

【Element】el-switch开关 点击弹窗确认框时状态先改变----点击弹窗取消框失效

一、背景 需求:在列表中添加定期出账的开关按钮,点击开关时,原来的状态不改变,弹出弹窗;点击弹窗取消按钮:状态不改变,点击弹窗确定按钮:状态改变,并调取列表数据刷新页…...

Java 中最常用的设计模式之一,工厂模式模式的写法,

文章目录 工厂模式1、简单工厂模式2、工厂模式3、抽象工厂4、总结 工厂模式 工厂模式是 Java 中最常用的设计模式之一,工厂模式模式的写法有好几种,这里主要介绍三种:简单工厂模式、工厂模式、抽象工厂模式 1、简单工厂模式 这里以制造cof…...

HTML的学习

知己知彼百战不殆 打算学习一下javascript 所以先从基础的html语言开始 其实就是头部 和身体 头部控制整个 html的语言 title等 <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"width…...

JS设计模式 — 行为委托

回顾一下原型&#xff0c;发现[[Prototype]]机制就是指对象中的一个内部链接引用另一个对象&#xff0c;这个机制的本质就是对象之间的关联关系 1、面相委托的设计 Task {setID: function(ID) { this.id ID; },outputID: function() { console.log( this.id ); } }; // 让 …...

Microsoft Expression Web - 网页布局

在本章中&#xff0c;我们将介绍网页的基本布局。在创建我们的网页布局之前&#xff0c;我们需要考虑我们的内容&#xff0c;然后设计我们希望如何呈现该内容&#xff0c;因为它是在我们的网站上可见的内容。 由我们如何呈现我们的内容&#xff0c;以便我们的观众找到我们的网…...

Java SpringBoot Controller常见写法

文章目录 环境Controller调用脚本运行结果总结 环境 系统: windows 11 工具: java, idea, git bash Controller 接口常见有以下几种方式 其中&#xff1a; Tobj 调用脚本 我的是windows 系统&#xff0c;使用 git bash 窗口运行, 用 cmd 或者 power shell 会有问题 curl …...

【驱动】SPI驱动分析(五)-模拟SPI驱动

简介 模拟SPI驱动是一种软件实现的SPI总线驱动。在没有硬件SPI控制器的系统中&#xff0c;通过软件模拟实现SPI总线的功能。它允许在不修改硬件的情况下&#xff0c;通过GPIO&#xff08;通用输入/输出&#xff09;引脚模拟SPI总线的通信&#xff0c;从而与SPI设备进行数据交换…...

人工智能_机器学习056_拉格朗日乘子法原理推导_公式由来详解_原理详解---人工智能工作笔记0096

https://blog.csdn.net/Soft_Po/article/details/118332454 这里有老师的一篇文章介绍拉格朗日乘子法的原理推导 结合老师的这篇文章我们来看一下详细的推导过程 可以看到上一节我们说,一个有条件的,函数,可以转换为一个,无条件的函数, 根据拉格朗日乘子法,可以创建出一个等…...

记RocketMQ本地开发环境搭建始末

前言 最近工作中涉及到了RocketMQ的应用&#xff0c;为方便开发决定本地搭建一套RocketMQ的使用环境。 果然实践是个好东西... VMware虚拟环境搭建 这个网上有很多教程&#xff0c;只会比我写的详细有条理&#xff0c;这里就不在赘述了。 虚拟机搭建好之后每次重启电脑都无…...

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

2025年- H71-Lc179--39.组合总和(回溯,组合)--Java版

1.题目描述 2.思路 当前的元素可以重复使用。 &#xff08;1&#xff09;确定回溯算法函数的参数和返回值&#xff08;一般是void类型&#xff09; &#xff08;2&#xff09;因为是用递归实现的&#xff0c;所以我们要确定终止条件 &#xff08;3&#xff09;单层搜索逻辑 二…...

深度解析:etcd 在 Milvus 向量数据库中的关键作用

目录 &#x1f680; 深度解析&#xff1a;etcd 在 Milvus 向量数据库中的关键作用 &#x1f4a1; 什么是 etcd&#xff1f; &#x1f9e0; Milvus 架构简介 &#x1f4e6; etcd 在 Milvus 中的核心作用 &#x1f527; 实际工作流程示意 ⚠️ 如果 etcd 出现问题会怎样&am…...

Pandas 可视化集成:数据科学家的高效绘图指南

为什么选择 Pandas 进行数据可视化&#xff1f; 在数据科学和分析领域&#xff0c;可视化是理解数据、发现模式和传达见解的关键步骤。Python 生态系统提供了多种可视化工具&#xff0c;如 Matplotlib、Seaborn、Plotly 等&#xff0c;但 Pandas 内置的可视化功能因其与数据结…...