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

pinia的独立维护,统一导出及持久化

目录

1.说明及示例

2.注意


1.说明及示例

在src下创建store文件夹,在store文件夹下创建index.js文件,内容如下:

import { createPinia } from "pinia";
// pinia的持久化
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
// 将所有的store进行导入,进行统一管理
import { useChannelStore } from "./modules/channel/channelStore";
import { useCountStore } from "./modules/count/countStore";
import { useRoleStore } from "./modules/role/roleStore";const pinia = createPinia();pinia.use(piniaPluginPersistedstate);export default pinia;
// 导出所有的store,用于在其他地方进行导入
export {useChannelStore, useCountStore, useRoleStore}

在main.js中导入pinia示例并传递给应用,main.js内容如下:

import { createApp } from 'vue'
import pinia from '@/store'
import App from './App.vue'
// import '@/api/interceptor'const app = createApp(App);app.use(pinia)
app.mount('#app')

在store目录下创建modules目录,在modules下创建各个仓库,如下:

在channel文件夹下创建仓库

import { defineStore } from "pinia";
import { ref } from "vue";
export const useChannelStore = defineStore("channel", () => {// 声明数据const channel = ref({id: "",name: "",num: 0,});// 声明操作数据的方法const setChannel = (info) => {channel.value = info;};const getChannel = () => {return channel.value;};const clearChannel = () => {channel.value = { id: "", name: "", num: 0 };};// 声明getters相关return {channel,setChannel,getChannel,clearChannel,};
},
{persist:true
}
);

在count文件夹下创建仓库

import { defineStore } from 'pinia'
import { ref,computed } from "vue";
export const useCountStore = defineStore("count", () => {const count = ref(0);const add = ()=> {count.value++;}const  sub = ()=> {count.value--;}const clear = () =>{count.value = 0}const dubble = computed(() => count.value * 2);return {count,add,sub,dubble,clear};
},
{persist:true
}
);

在role文件夹下创建仓库

import {defineStore} from 'pinia'
import {ref} from 'vue'export const useRoleStore = defineStore('role',() =>{
const roles = ref([]);const getRoles = () =>{return roles;
}
const setRoles = (roleInfo) =>{roles.value.push(roleInfo)
}
const clearRoles = () =>{roles.value.length = 0
}return {roles,getRoles,setRoles,clearRoles
}
},
{persist:true
}
)

在store的index文件中对这些store进行统一的导入及导出,进行统一管理。

在各个画面中进行使用,直接从store文件夹中导入各个仓库即可,如下:

<template><div>测试useStore</div><div>数量 --- {{ count }} --- {{ dubble }}</div><button @click="add">加</button><button @click="sub">减</button><button @click="clear">清空</button><div>--------------------------------------</div><div>测试channelStore</div><div>频道信息 --- {{ channel }} --- {{ getChannel() }}</div><button @click="setCh">设置频道</button><button @click="clearChannel">清空频道</button><div>--------------------------------------</div><div>测试roleStore</div><div>角色信息 --- {{ roles }} --- {{ getRoles() }} </div><button @click="setRo">设置角色</button><button @click="clearRoles">清空角色</button>
</template>
<script setup>
import { ref } from 'vue'
import { useCountStore,useChannelStore,useRoleStore} from '@/store'
import { storeToRefs } from 'pinia'// 数量store
const countStore = useCountStore()
// 解构属性,需要通过storeToRefs来保持其响应式
const { count, dubble } = storeToRefs(countStore)
// 解构方法,则不需要,方法不需要响应式
const { add, sub, clear } = countStore// 频道store
const channelStore = useChannelStore()
const { channel } = storeToRefs(channelStore)
const { setChannel, getChannel, clearChannel } = channelStore// 角色store
const roleStore = useRoleStore()
const { roles } = storeToRefs(roleStore)
const { getRoles, setRoles, clearRoles } = roleStore// 设置频道
const setCh = () => {let num = Math.round(Math.random()*10)const channel = {id: num,name: num + '号频道',num: num};setChannel(channel)
}// 设置角色
const setRo = () => {const role = {id: 'admin',name: '管理员',level: 1}setRoles(role)
}</script>

2.注意

①store的解构

store中的属性必须通过storeToRefs方法进行解构,来保持其响应性。

store中的方法则不需要,直接解构就可以了。

②在项目中,需要在store文件夹下的index.js文件进行store的独立维护,然后再main.js中直接导入。

③需要在store文件夹下的index.js文件中进行所有仓库的统一管理,即导入所有的仓库,再进行导出,这样在其他画面中使用时直接从store中导入即可。

④pinia信息在画面刷新后会消失,可以通过pinia-plugin-persistedstate实现pinia的持久化

先进行安装,在store中进行配置,在各个仓库中进行配置,详细的参照官网:

快速开始 | pinia-plugin-persistedstate

相关文章:

pinia的独立维护,统一导出及持久化

目录 1.说明及示例 2.注意 1.说明及示例 在src下创建store文件夹&#xff0c;在store文件夹下创建index.js文件&#xff0c;内容如下&#xff1a; import { createPinia } from "pinia"; // pinia的持久化 import piniaPluginPersistedstate from "pinia-pl…...

【AI视野·今日Robot 机器人论文速览 第六十七期】Mon, 1 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Mon, 1 Jan 2024 Totally 16 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers MURP: Multi-Agent Ultra-Wideband Relative Pose Estimation with Constrained Communications in 3D Environments Authors A…...

FBL刷写

刷写 1、刷写需求的理解2、刷写流程2.1、预编程阶段&#xff1a;保证在编程阶段的动作能够正常操作&#xff0c;控制器给响应。整车功能不会出现问题 刷写某一控制器时&#xff0c;避免其他控制器集DTC,85控制DTC&#xff1b; 28 通信控制.保证总线负载率不要过高&#xff08;下…...

OpenCV-Python(24):模板匹配

原理及介绍 模板匹配是一种常用的图像处理技术&#xff0c;它用于在一幅图像中寻找与给定模板最匹配的区域(在一副大图中搜寻查找模版图像位置的方法)。模板匹配的基本思想是将模板图像在目标图像上滑动&#xff0c;并计算它们的相似度&#xff0c;找到相似度最高的位置即为匹配…...

机器学习--回归算法

&#x1f333;&#x1f333;&#x1f333;小谈&#xff1a;一直想整理机器学习的相关笔记&#xff0c;但是一直在推脱&#xff0c;今天发现知识快忘却了&#xff08;虽然学的也不是那么深&#xff09;&#xff0c;但还是浅浅整理一下吧&#xff0c;便于以后重新学习。 &#x1…...

计算机网络——多址复用技术

1. 频分多址&#xff08;FDMA&#xff09; 1.1 基本原理 频率分配&#xff1a;在FDMA系统中&#xff0c;整个可用的频带被分割成多个较小的频带或通道。每个通道分配给一个用户。 时间利用&#xff1a;用户在分配给他们的频道上持续进行通信&#xff0c;不受时间限制。 1.2 优…...

stm32 HAL库 4096线ABZ编码器

[TOC]目录 ABZ编码器 4096线 买的是这个 AB相代表计数方向&#xff0c;Z代表过零点 cubemx配置 定时器Encoder 也可以选上DMA 中断 Z相GPIO中断 找一个空闲管脚 打开对应中断 代码 不用DMA int main(void) {short Enc_cnt 0;HAL_TIM_Encoder_Start_IT(&ht…...

Java爬虫之Jsoup

1.Jsoup相关概念 Jsoup很多概念和js类似&#xff0c;可参照对比理解 Document &#xff1a;文档对象。每份HTML页面都是一个文档对象&#xff0c;Document 是 jsoup 体系中最顶层的结构。 Element&#xff1a;元素对象。一个 Document 中可以着包含着多个 Element 对象&#…...

如何在 C# 12 中使用主构造函数

C# 12 中最引人注目的新功能之一是对主构造函数的支持。主构造函数的概念并不新鲜。包括 Scala、Kotlin 和 OCaml 在内的多种编程语言都支持直接在声明类的位置集成构造函数参数。 在本文中&#xff0c;我们将仔细研究主构造函数以及如何在 C# 12 中使用它们。若要运行本文中提…...

Zookeeper之Java客户端实战

ZooKeeper应用的开发主要通过Java客户端API去连接和操作ZooKeeper集群。可供选择的Java客户端API有&#xff1a; ZooKeeper官方的Java客户端API。第三方的Java客户端API&#xff0c;比如Curator。 接下来我们将逐一学习一下这两个java客户端是如何操作zookeeper的。 1. ZooKe…...

将文本文件导入Oracle数据库的简便方法:SQL Loader Express

需求 我有一个文本文件dbim.txt&#xff0c;是通过alert log生成的&#xff0c;内容如下&#xff1a; 2020-09-11 2020-09-11 ... 2023-12-03 2023-12-03 2023-12-26我已经在Oracle数据库中建立了目标表&#xff1a; create table dbim(a varchar(16));我想把日志文件导入Or…...

element-ui table-自定义表格某列的表头样式或者功能

自带表格 自定义表格某列的表头样式或者功能 <el-table><el-table-column :prop"date">//自定义表身每行数据<template slot-scope"scope">{{scope.row[scope.column.label] - ? - : scope.row[scope.column.label]}}</template>…...

Android 13.0 SystemUI状态栏居中显示时间和修改时间显示样式

1.概述 在13.0的系统rom定制化开发中,在systemui状态栏系统时间默认显示在左边和通知显示在一起,但是客户想修改显示位置,想显示在中间,所以就要修改SystemUI 的Clock.java 文件这个就是管理显示时间的,居中显示的话就得修改布局文件了 效果图如下: 2.SystemUI状态栏居中显…...

讲解eureca和nacus的区别

Eureca和Nacus都是远程过程调用&#xff08;RPC&#xff09;框架&#xff0c;用于实现分布式系统中不同节点之间的通信。它们之间的主要区别如下&#xff1a; 架构设计&#xff1a;Eureca是一个基于JavaScript的RPC框架&#xff0c;它使用了WebSockets作为传输层协议。Eureca C…...

python中parsel模块的css解析

一、爬虫页面分类 1.想要爬取的内容全部在标签中&#xff0c;可以使用xpath去进行解析如下图 2.想要爬取的内容呈现json的数据特征&#xff0c;用.json()转换为字典格式 3.页面不规则&#xff0c;标签中包含大括号&#xff0c;如下面想要获取键值内容怎么做&#xff0c;先用re正…...

Oracle OCP怎么样线上考试呢

大家好&#xff01;今天咱们就来聊聊Oracle OCP这个让人又爱又恨的认证。为啥说又爱又恨呢&#xff1f;因为它既是IT界的“金字招牌”&#xff0c;又是一块硬骨头&#xff0c;不是那么容易啃下来的。好了&#xff0c;废话不多说&#xff0c;我们直奔主题&#xff0c;来看看关于…...

如何让自己的写的程序在阿里云一直运行

购买了阿里云服务器后&#xff0c;每次要用自己写在阿里云的服务器程序都要连接到云端 然后./运行该程序&#xff0c;而且每次一断开终端&#xff0c;该服务器就会自动停止&#xff0c;这样使用相当麻烦。那怎样才能让我们的服务器一直在云端后台运行&#xff0c;即便退出终端…...

【计算机图形学】NAP: Neural 3D Articulation Prior

文章目录 1. 这篇论文做了什么事&#xff0c;有什么贡献&#xff1f;2. Related Work铰接物体建模3D中的Diffusion model扩散模型 3. Pipeline铰接树参数化基于Diffusion的铰接树生成去噪网络 4. 实验评价铰接物体生成——以往做法与本文提出的新指标NAP捕捉到的铰接物体分布质…...

知识付费平台搭建?找明理信息科技,专业且高效

明理信息科技知识付费saas租户平台 在当今数字化时代&#xff0c;知识付费已经成为一种趋势&#xff0c;越来越多的人愿意为有价值的知识付费。然而&#xff0c;公共知识付费平台虽然内容丰富&#xff0c;但难以满足个人或企业个性化的需求和品牌打造。同时&#xff0c;开发和…...

CentOS7部署Kafka

CentOS7部署Kafka 一、部署1、前置条件2、下载与解压3、修改配置4、启动kafka二、使用详解1、创建一个主题2、展示所有主题3、启动消费端接收消息4、生产端发送消息三、代码集成pom.xmlapplication.propertiesKafkaConfiguration.javaKafkaConsumer.javaKafkaProducer.javaVehi…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

聊一聊接口测试的意义有哪些?

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

JS设计模式(4):观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

代码规范和架构【立芯理论一】(2025.06.08)

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...

结构化文件管理实战:实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...