vue3+Pinia的使用 - 封装

news2024/11/15 4:52:07

目录:

persist.ts   可存储到本地

import { PersistedStateOptions } from "pinia-plugin-persistedstate";

/**
 * @description pinia 持久化参数配置
 * @param {String} key 存储到持久化的 name
 * @param {Array} paths 需要持久化的 state name
 * @return persist
 * */
const piniaPersistConfig = (key: string, paths?: string[]) => {
  const persist: PersistedStateOptions = {
    key,
    storage: localStorage,
    // storage: sessionStorage,
    paths
  };
  return persist;
};

export default piniaPersistConfig;

index.ts

import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

// pinia persist
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

export default pinia;

main.ts导入


import pinia from "@/stores";

createApp(App).use(pinia)

使用:

存储数据:general.ts

import { defineStore } from "pinia";
import piniaPersistConfig from "@/stores/helper/persist";

interface GeneralType {
  linesName: string;
}
export const useGeneralStore = defineStore({
  id: "live-General",
  state: (): GeneralType => ({
    linesName: "全部"
  }),
  getters: {},
  actions: {
    // Set setGeneral
    setGeneral(linesName: string) {
      this.linesName = linesName;
    }
  },
  persist: piniaPersistConfig("live-linesName")  // 持久化操作
});

修改数据:


import { useGeneralStore } from "@/stores/modules/general";
const generalStore = useGeneralStore();

generalStore.setGeneral(linesName.value);

直接使用:generalStore.linesName

监听piain中的数据更新:数据变化就会触发

generalStore.$subscribe((linesNames, state) => {
  console.log(linesNames, state);
});

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

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

相关文章

EfficientVMamba:Atrous Selective Scan for LightWeightVisualMamba

摘要 https://arxiv.org/pdf/2403.09977.pdf 先前的轻量级模型开发努力主要集中在基于CNN和Transformer的设计上,但仍面临持续的挑战。CNN擅长局部特征提取,但会牺牲分辨率,而Transformer提供了全局范围,但会加剧计算需求 O ( N…

苹果CMS影视APP源码,二开版本带视频教程

编译app教程 工具下载:Android Studio 官网地址:https://developer.android.google.cn/studio/ 环境设置: 设置中文:https://blog.csdn.net/qq_37131111/article/details/131492844 汉化包找最新的下载就行了,随便下载…

如何压缩视频到最小?教会你压缩原理~

在网上上传视频时,经常会遇到因为视频体积过大上传失败等情况发生,怎么降低视频体积呢?科普一个小知识:视频体积和视频的时长、编码格式、分辨率和比特率(又称码率)有关。视频文件大小计算公式:…

脚本实现Ubuntu设置屏幕无人操作,自动黑屏

使用 xrandr 命令可以实现对屏幕的控制,包括调整分辨率、旋转屏幕以及关闭屏幕等。要实现 Ubuntu 设置屏幕在无人操作一段时间后自动黑屏,非待机,并黑屏后点击触摸屏可以唤醒屏幕,可以借助 xrandr 命令来实现。 首先,…

Microsoft Edge浏览器修改网页背景颜色

目录 一、原始页面二、Microsoft Edge网页背景颜色修改三、Microsoft Edge主体颜色修改四、最终效果五、总结 一、原始页面 下面是大多数默认的网页界面。 二、Microsoft Edge网页背景颜色修改 在Microsoft Edge网页地址栏中输入下面指令: edge://flags在搜索框…

快速上手Spring Cloud 十三:探究Spring Cloud在跨境业务中的应用与优势

快速上手Spring Cloud 一:Spring Cloud 简介 快速上手Spring Cloud 二:核心组件解析 快速上手Spring Cloud 三:API网关深入探索与实战应用 快速上手Spring Cloud 四:微服务治理与安全 快速上手Spring Cloud 五:Spring …

Netty剖析 - Why Netty

文章目录 Why NettyI/O 请求的两个阶段I/O 模型Netty 如何实现自己的 I/O 模型线程模型 - 事件分发器(Event Dispather)弥补 Java NIO 的缺陷更低的资源消耗网络框架的选型Netty 发展现状Netty 的使用思维导图 Why Netty I/O 模型、线程模型和事件处理机…

货币系统(闫氏DP分析法)

题目描述: 给定 V 种货币(单位:元),每种货币使用的次数不限。 不同种类的货币,面值可能是相同的。 现在,要你用这 V 种货币凑出 N 元钱,请问共有多少种不同的凑法。 输入格式&am…

深入Facebook的世界:探索数字化社交的无限可能性

引言 随着数字化时代的到来,社交媒体平台已经成为了人们日常生活中不可或缺的一部分,而其中最为突出的代表之一便是Facebook。作为全球最大的社交媒体平台之一,Facebook不仅仅是一个社交网络,更是一个数字化社交的生态系统&#…

Windows/Linux-openEuler系统使用路由侠内网穿透,部署项目详细教程

文章目录 Windows/Linux-openEuler系统使用路由侠内网穿透,部署项目详细教程一、在windows系统下载安装路由侠并实现项目部署1、下载路由侠并注册安装到Windows系统2、点击内网映射,添加映射,注册域名前缀3、选择网站应用4、配置你想要代理项…

【Bug-ModuleNotFoundError: No module named ‘models‘】

🚀 作者 :“码上有前” 🚀 文章简介 :Python 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 出现这个错误: 出现了ModuleNotFoundError: No module named models’的问题。 文件在Model…

「吞噬星空」存在哪些境界,不朽级呼延博是否有一席之位?

吞噬星空中浩瀚无垠的宇宙,其深邃与广阔,仿佛一个无尽的迷宫,蕴藏着无数未知的境界。从地球出发,见证了行星级与恒星级的威能,然而这只是宇宙力量的冰山一角。行星级强者,在地球上已是至高无上的存在&#…

MTransE阅读笔记

Multilingual Knowledge Graph Embeddings for Cross-lingual Knowledge Alignment 用于交叉知识对齐的多语言知识图谱嵌入(MTransE) Abstract 最近的许多工作已经证明了知识图谱嵌入在完成单语知识图谱方面的好处。由于相关的知识库是用几种不同的语言构建的,因…

2010-2021年银行网点及员工信息数据

2010-2021年银行网点及员工信息数据 1、时间:2010-2021年 2、来源:整理自csmar 3、指标:银行代码、股票代码、银行中文简称、统计截止日期、分行数量、机构网点数量、其中:境内网点数量、其中:境外网点数量、在职员…

python和c语言的区别是什么

Python可以说是目前最火的语言之一了,人工智能的兴起让Python一夜之间变得家喻户晓,Python号称目前最最简单易学的语言,现在有不少高校开始将Python作为大一新生的入门语言。本萌新也刚开始接触Python,发现Python与其他语言确实有…

在Semantic Kernel中使用Qdrant向量数据库

本文将介绍如何在Semantic Kernel中使用Qdrant向量数据库,并演示如何在Semantic Kernel中进行向量更新和查询操作。 1. 背景 在前一篇文章《Qdrant 向量数据库的部署以及如何在 .NET 中使用 TLS 安全访问》中,我们介绍了如何使用 Docker 部署 Qdrant 向…

9-Dubbo源码分析之:Dubbo Serialize 层:多种序列化算法,总有一款适合你

通过前面课时的介绍,我们知道一个 RPC 框架需要通过网络通信实现跨 JVM 的调用。既然需要网络通信,那就必然会使用到序列化与反序列化的相关技术,Dubbo 也不例外。下面我们从 Java 序列化的基础内容开始,介绍一下常见的序列化算法…

PCB损耗来源

信号经过PCB板会产生损耗,主要包括导体损耗,介电损耗和辐射损耗 导体损耗:导体损耗是由于电流流动过程中产生电阻损耗而发热。 介电损耗:介电损耗是由于电场通过介质时分子的交替极化和晶格碰撞造成的。 辐射损耗:辐…

能够解析任何编程语言的开源语法解析树 | 开源日报 No.171

tree-sitter/tree-sitter Stars: 14.6k License: MIT tree-sitter 是一个用于编程工具的增量解析系统。 该项目的主要功能、关键特性、核心优势包括: 通用性,能够解析任何编程语言高效性,能够在文本编辑器中每次按键都进行解析健壮性&…

pygame用chatgpt绘制3d沿x轴旋转的

import pygame from pygame.locals import * import sys import mathpygame.init()width, height 800, 600 screen pygame.display.set_mode((width, height))vertices [(0, 100, 0), (100, 200, 0), (300, 100, 0)]angle 0 rotation_speed 2 # 可根据需要调整旋转速度 c…