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

news/2024/2/29 4:08:56

整合状态管理组件

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


在这里插入图片描述

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

https://www.xjx100.cn/news/3119021.html

相关文章

智能监控平台/视频共享融合系统EasyCVR接入RTSP协议视频流无法播放原因是什么?

视频集中存储/云存储/视频监控管理平台EasyCVR能在复杂的网络环境中,将分散的各类视频资源进行统一汇聚、整合、集中管理,实现视频资源的鉴权管理、按需调阅、全网分发、智能分析等。AI智能/大数据视频分析EasyCVR平台已经广泛应用在工地、工厂、园区、楼…

mybatis(mybatis-plus)报invalid bound statement (not found)或者找不到xml文件(各种情况)

情况1:查看yml文件是否添加mybatis配置 mybatis-plus:# Mapper.xml 文件位置 Maven 多模块项目的扫描路径需以 classpath*: 开头# 实现接口绑定mapperLocations: classpath*:mybatis/xml/*Mapper.xml情况2:区分使用的的版本是mybatis还是mybstis-plus&a…

【古月居《ros入门21讲》学习笔记】18_常用可视化工具的使用

目录 说明: 1. Qt工具箱 日志输出工具:rqt_console 绘制数据曲线:rqt_plot 图像渲染工具:rqt_image_view 综合工具:rqt 2. 三维可视化工具:Rviz Rviz启动 使用示例 3. 仿真平台:Gazebo…

通用plantuml模板头

通用plantuml文件 startuml participant Admin order 0 #87CEFA // 参与者、顺序、颜色 participant Student order 1 #87CEFA participant Teacher order 2 #87CEFA participant TestPlayer order 3 #87CEFA participant Class order 4 #87CEFA participant Subject order …

后端项目连接数据库-添加MyBatis依赖并检测是否成功

一.在pom.xml添加Mybatis相关依赖 在Spring Boot项目中&#xff0c;编译时会自动加载项目依赖&#xff0c;然后使用依赖包。 需要在根目录下pom.xml文件中添加Mybatis依赖项 <!-- Mybatis整合Spring Boot的依赖项 --> <dependency><groupId>org.mybatis.s…

SimpleCG小游戏开发系列(1)--扫雷

一、前言 前面我们学习了SimpleCG的游戏开发框架,从本篇开始,我们用一系列小游戏的开发来加深对框架的了解.我们先以windows的经典游戏--扫雷,作为首个例子。游戏预览如下 二、框架搭建 因为游戏程序的大体框架差不多&#xff0c;所以我们可以搭建一个通用的主程序。如下所示&a…

element-plus el-dialog 弹窗隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作等

场景 el-dialog 隐藏遮罩并且可以控制弹窗后的元素、点击、滚动、其他事件操作&#xff0c;比如一个弹窗打开了&#xff0c;我要能控制弹窗后面的滚动、点击等等一系列事件。 修改方法 首先我们需要隐藏弹窗遮罩 :modal"false"&#xff0c;并且给 el-dialog 弹窗…

SpringBoot_第八章(读写分离_ShardingSphere实现)

目录 1&#xff1a;ShardingSphere实现Spring的读写分离分库分表 2&#xff1a;什么是ShardingSphere 3&#xff1a;ShardingJDBC实现代码案例 3.1&#xff1a;pom准备 3.2&#xff1a;读写分离 3.3&#xff1a;垂直分库分表 3.4&#xff1a;水平单表不分库分片 3.5&…