vue3+Pinia的使用 - 封装

目录:

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);
});

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于Transformer的医学图像分类研究

医学图像分类目前面临的挑战 医学图像分类需要研究人员同时具备医学图像分析和数字图像的知识背景。由于图像尺度、数据格式和数据类别分布的影响,现有的模型方法,如传统的机器学习的识别方法和基于深度卷积神经网络的方法,取得的识别准确度…

2024第六届环境科学与可再生能源国际会议能源 (ESRE 2024) 即将召开!

2024第六届环境科学与可再生能源国际会议 能源 (ESRE 2024) 即将举行 2024 年 6 月 28 日至 30 日在德国法兰克福举行。ESRE 2024 年 旨在为研究人员、从业人员和专业人士提供一个论坛 从工业界、学术界和政府到研究和 发展,环境科学领域的专…

Kubernetes 知识体系 系列一

多年前,大多数软件应用程序都是大型的单体,要么作为单个进程运行,要么作为少数服务器上的少量进程运行。这种过时的系统一直延续很久。 它们的发布周期较慢,更新相对较少。 在每个发布周期结束时,开发人员将整个系统…

算法第三十四天-有效数独

有效数独 题目要求 解题思路 一个简单的方法是,遍历9*9书读三次,以确保: 行中没有重复的数字列中没有重复的数字3*3子数独中没有重复的数字 但是,实际上,所有的一切都以可以在一次迭代中完成 可以使用box_index (r…

网约车APP小程序源码代驾顺风拼车货运司乘端安卓苹果源码可二开

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 一、详细介绍 系统是基于Thinkphpuniapp开发的,全开源未加密,这套源码可以拿回去自己做二开 后台用户端司机端 功能详情介绍: 车主实名认证,驾驶证认证,车…

Python列表、元组、字典及集合

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、列表定义方式: 二、元组1、定义方式:2、元组中的物理存储地址不可修改,如果修改则会报错,但是元组中的列表、字典项等却可以…

代码随想录算法训练营第三十七天 | 738. 单调递增的数字、968. 监控二叉树

代码随想录算法训练营第三十七天 | 738. 单调递增的数字、968. 监控二叉树(待刷) 738. 单调递增的数字题目解法 968. 监控二叉树(待刷) 738. 单调递增的数字 题目 解法 class Solution { public:int monotoneIncreasingDigits(in…

File和IO流

1. File类常用方法 1.1 获取基本属性 • public String getName() :获取名称 • public String getPath() :获取路径 • public String getAbsolutePath():获取绝对路径 • public File getAbsoluteFile():获取绝对路径表示…

嵌入式培训3-28

编写一条学生链表&#xff0c;写一些能够像链表里边添加数据的函数 实现&#xff1a;将链表中的所有内容保存到文件中去 以及 读取文件中的所有内容&#xff0c;加载到链表里面 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <ma…

AD学习笔记

1. EOS 选择中心点 2. PDL 标记距离 3. 选择线框&#xff0c;按DSD重新定义板框 4. su框选&#xff0c;sl线选 5. mx x/y轴移动 6. dk 打开层叠管理器 7. shifts单层显示 8. 单端引脚不报错&#xff0c;CO工程选项下关闭报错即可。 9. PCB界面中寻找元件&#xff1a;…

蓝桥杯 - 小明的背包3(多重背包)

解题思路&#xff1a; 动态规划 多重背包问题需要在01背包问题&#xff08;不重复&#xff09;的基础上多加一层循环进行遍历&#xff0c;并且dp[ j ]的式子也需要修改 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner scan …

【JavaSE】网络编程

定义&#xff1a;在网络通信协议下&#xff0c;不同计算机上运行的程序&#xff0c;进行的数据传输 常见的软件架构&#xff1a; C/S&#xff1a;Client/Server&#xff08;客户端/服务器&#xff09; 在用户本地需要下载并安装客户端程序 画面可以很精美&#xff0c;用户体…

【面试经典 | 150】单词拆分

文章目录 Tag题目来源解题思路方法一&#xff1a;动态规划 写在最后 Tag 【动态规划】【字符串】 题目来源 139. 单词拆分 解题思路 方法一&#xff1a;动态规划 定义状态 定义 dp[i] 表示字符串 s 前 i 个字符组成的字符串&#xff08;s[0, ..., i-1]&#xff09;是否能被…

7.JDK下载和安装

文章目录 一、下载二、安装三、JDK的安装目录介绍 写JAVA代码不是随随便便能写的&#xff0c;我们得先做一点准备工作。例如&#xff0c;我们平时想要玩一把游戏&#xff0c;就需要先下载、安装才能玩游戏。JAVA也是一样的&#xff0c;也是需要下载并安装相关的软件&#xff0c…

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

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

[疑难杂症2024-002]一个“显而易见“的问题,是如何进入生产环境的?

本文由Markdown语法编辑器编辑完成。 1. 前言 最近在处理一个在医院上线的系统的问题。这个问题&#xff0c;由于关联的模块比较多&#xff0c;至少涉及到3个模块之间的功能调用。因此&#xff0c;协调大家都有时间来排查问题不是很方便。这个问题就拖了有一周左右。医院那边…

2024-03-28 Quest3 开发环境配置教程

文章目录 准备条件1 登录 Meta 账号2 Oculus 软件下载与配置3 下载 Quest3 开发包4 Unity 环境配置环境测试 准备条件 Quest3 头显一个。一根 USB 3.0 数据线。魔法。 ​ 有关 quest3 激活与配置可参考 B 站 UP &#xff1a;“南七月nqy_”。跳转链接&#xff1a;https://spa…

Exception in thread “main“ com.fasterxml.jackson.databind.JsonMappingException:

问题&#xff1a;jaskson反序列化超出最大长度 Caused by: com.fasterxml.jackson.core.exc.StreamConstraintsException: String length (5043456) exceeds the maximum length (5000000) 场景&#xff1a;前端传递过大base64 原因&#xff1a; jaskon默认已经限制了最大长…

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

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

路由的完整使用

多页面和单页面 多页面是指超链接等跳转到另一个HTML文件,单页面是仍是这个文件只是路由改变了页面的一部分结构. 路由的基本使用 使用vue2,则配套的路由需要是第3版. 1)下载vue-router插件 2)引入导出函数 3)new 创建路由对象 4)当写到vue的router后只能写路由对象,因此只…