手写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()

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

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

相关文章

2021年6月3日 Go生态洞察:Fuzzing技术的Beta测试

🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…

电子学会C/C++编程等级考试2023年03月(三级)真题解析

C/C++等级考试(1~8级)全部真题・点这里 第1题:和数(2023.3) 给定一个正整数序列,判断其中有多少个数,等于数列中其他两个数的和。 比如,对于数列1 2 3 4, 这个问题的答案就是2, 因为3 = 2 + 1, 4 = 1 + 3。 时间限制:10000 内存限制:65536输入 共两行,第一行是数列中…

8. 队列

队列(queue)是一种遵循先入先出规则的线性数据结构。顾名思义,队列模拟了排队现象,即新来的人不断加入队列的尾部,而位于队列头部的人逐个离开。 如下图所示,我们将队列的头部称为“队首”,尾部称为“队尾”&#xff…

HuggingFace学习笔记--Model的使用

1--Model介绍 Transformer的 model 一般可以分为:编码器类型(自编码)、解码器类型(自回归)和编码器解码器类型(序列到序列); Model Head(任务头)是在base模型…

Rust UI开发(5):iced中如何进行页面布局(pick_list的使用)?(串口调试助手)

注:此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。 这是一个系列博文,本文是第五篇,前四篇链接: 1、Rust UI开发(一):使用iced构建UI时…

神经影像和人类基因组关联分析的实践过程

神经影像和人类基因组关联分析的实践过程 摘要引言实施步骤1. 阶段1:处理转录图谱数据1.1 步骤1:验证探针到基因的注释1.2 步骤2:过滤探针1.3 步骤3:选择代表性探针1.4 步骤4:将组织样本分配到分块状的大脑区域1.5 步骤5:规范表达测量1.6 步骤6:选择在供体大脑中具有一致表达模…

MySQL实现(高可用方案-MHA安装及配置)

MySQL高可用性解决方案Master High Availability (MHA) 是一种在 MySQL 故障转移环境中实现快速故障转移和数据保护的开源软件。MHA 能在 MySQL 主节点发生故障时,自动将备节点提升为主节点,并且不会中断正在进行的 SQL 操作。 需求:主从配置…

力扣295. 数据流的中位数(java,堆解法)

Problem: 295. 数据流的中位数 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 由于该题目的数据是动态的我们可以维护两个堆来解决该问题 1.维护一个大顶堆,一个小顶堆 2.每个堆中元素个数接近n/2;如果n是偶数,两个堆中的数据个数…

【UGUI】实现UGUI背包系统的六个主要交互功能

在这篇教程中,我们将详细介绍如何在Unity中实现一个背包系统的六个主要功能:添加物品、删除物品、查看物品信息、排序物品、搜索物品和使用物品。让我们开始吧! 一、添加物品 首先,我们需要创建一个方法来添加新的物品到背包中。…

使用开源PolarDB和imgsmlr进行高效的图片存储和相似度搜索

PolarDB的云原生架构提供高性价比的数据存储、可扩展的灵活性、高效的并行计算能力以及快速的数据搜索和处理能力。PolarDB通过结合计算算法,挖掘业务数据的价值,将其转化为生产力。 本文介绍如何使用开源PolarDB和imgsmlr存储图像特征值,并…

MyBatis的强大特性--动态SQL

目录 前言 if trim where set foreach 前言 动态 SQL 是 MyBatis 的强大特性之一。如果你使用过 JDBC 或其它类似的框架,你应该能理解根据不同条件拼接 SQL 语句有多痛苦,例如拼接时要确保不能忘记添加必要的空格,还要注意去掉列表…

【java】记一次Java应用查询不到最新数据的问题

文章目录 项目第一次上线前,生产环境调试阶段,项目经理反馈在备机房所在环境验证时报错:id不存在。 我赶紧去排查,查看日志,发现日志里打印的id是旧数据记作A,拿着这个数据去调其他系统提示id不存在。 查看…

JC/T 2087-2011建筑装饰用仿自然面艺术石检测

建筑装饰用仿自然面艺术石是指以硅酸盐水泥、轻质骨料为主要原料经浇筑成型的饰面装饰材料。 JC/T 2087-2011建筑装饰用仿自然面艺术石测试: 测试项目 测试方法 外观质量 GB/T 18601 尺寸偏差 GB/T 18601 体积密度 GB/T 9966.3 吸水率 GB/T 9966.3 压缩强…

File类

File 概述 File: 路径 IO流: 传输 路径 相对路径, 绝对路径 File File对象就表示一个路径,可以是文件的路径、也可以是文件夹的路径这个路径可以是存在的,也允许是不存在的 构造方法 代码示例: package FileTest1;import java.io.File;public c…

1+X网络系统建设与运维练习题

1.OSPF的最优路由,会放到IP路由表中指导数据转发 (x) 2.当AP工作在2.4GHz频段的时候,AP工作的频率范围是2.4GHz~2.4835GHZ。在此频率范围内又划分出14个信道。每信道的中心频率相隔5MHz,每个信道可供占用的带宽为22MHz…

虚幻学习笔记1—给UI添加动画

一、前言 本文所使用的虚幻版本为5.3.2,之前工作都是用unity,做这类效果用的最多的是一个DoTween的插件,在虚幻中都内置集成了这这种效果制作。 图1.1 UI动画 二、过程 1、首先,在诸如按钮、图像等可交互控件中选中,如…

R语言单因素方差分析+差异显著字母法标注+逐行详细解释

R语言单因素方差分析 代码如下 df <- read.csv("data.csv",header TRUE,row.names 1) library(reshape2) df <- melt(df,idc()) names(df) <- c(trt, val) df aov1 <- aov(val~trt,datadf) summary(aov1)library(agricolae) data <- LSD.test(aov…

5 存储器映射和寄存器

文章目录 5.3 芯片内核5.3.1 ICache5.3.2 DCache5.3.3 FlexRAM 5.4 存储器映射5.4.1 存储器功能划分5.4.1.1 存储器 Block0 内部区域功能划分5.4.1.2 储存器 Block1 内部区域功能划分5.4.1.3 储存器 Block2 内部区域功能划分 5.5 寄存器映射5.5.1 GPIO1的输出数据寄存器 5.3 芯…

客户案例:EDLP助力金融行业打造高效数据防泄露体系

客户背景 某金融机构是一家以金融科技为核心&#xff0c;致力于为客户提供全方位、智能化、便捷化金融服务的综合性企业。公司总部位于南京&#xff0c;业务范围覆盖全国&#xff0c;拥有强大的技术研发团队和优秀的业务精英&#xff0c;为客户提供全方位的金融服务解决方案。 …

Qt-No relevant classes found. No output generated问题解决

qt在编译时会使用moc&#xff0c;即Meta-Object Compiler&#xff0c;对任何继承于QObject的子类我们都应在类开头写上Q_OBJECT&#xff0c;而moc做的一件事情便是将带有Q_OBJECT的类的cpp文件使用moc进行处理&#xff0c;这是因为Q_OBJECT实际上声明了一些函数&#xff0c;而m…