Vue3+Pinia

1.单纯调接口(安装pinia及引入如下第一张图)

1.npm install pinia

2.在main.js里引入即可

  import { createPinia } from 'pinia'

  app.use(createPinia())
1.stores建立你文件的ts、内容如下:
  1-1 import { defineStore } from 'pinia'
  1-2 import { findPageJobSet } from '@/api/task-queue.js'(引入接口路径)

2.建立一个当前actions 
  const actions ={
    findPageJobSet(data) {
        return new Promise((resolve,reject)=>{
            findPageJobSet(data).then(response =>{
              // 根据自己接口返回来定
                if(response.ok){
                    resolve(response)
                }else{
                    message.error(response.messsage)
                }
            })
        }).catch(()=>{
            reject()
        })
    }
  }

3.最后抛出去
  export const useTaskQueue=defineStore('useTaskQueue',{
    actions
  })

4.在页面使用的时候
  4-1 import { mapActions } from 'pinia'
  4-2 import { useTaskQueue } from "@/stores/taskQueue"(这个是你刚才在store下建的文件)
  4-3 methods
       ...mapActions(useTaskQueue, ['findPageJobSet']),
  4-4 使用 this.findPageJobSet(data)正常传值就行

2.PiniaStore的互相调用(在上面代码中我们一直只使用了一个Store仓库,其实在真实项目中我们往往是有多个Store的。有多个Store时,就会涉及Store内部的互相调用问题)

2-1 新建一个Store仓库 index.ts

import { defineStore } from "pinia";
import { hyyStore } from './demo'
export const mainStore = defineStore('main', {
  state: () => {
    return {
      count: 0,
      helloPinia: 'Hello Pinia',
      phone: '17808098401'
    }
  },
  getters: {
    phoneHidden(): string {
      return this.phone.toString().replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
    }
  },
  actions: {
    changeState() {
      this.count++
      this.helloPinia = 'change helloPinia!!!'
    },
    getList() {
      console.log(hyyStore().list)
    }
  }
})

2-2 index.ts中调用demo.ts仓库

import { defineStore } from 'pinia'

export const hyyStore = defineStore("hyyStore", {
  state: () => {
    return {
      list: ["黄黄", "小黄", "黄小黄"]
    }
  },
  getters: {
  },
  actions: {

  }
})

2-3 具体页面使用

import { mainStore } from '@/stores/demo'

setup() {
  const getList = () => {
    store.getList()
  }
  return {
    getList
  }
}

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

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

相关文章

开源TTS模型支持中日韩并可以微调自己的声音模型;微软开源的知识图谱RAG;RAG和LLMs构建的搜索应用程序

✨ 1: Fish Speech Fish Speech 开源TTS模型支持中日韩,语音合成不止于自然 Fish Speech 是一个开源的语音生成项目,致力于开发和改进语音合成技术。项目最新稳定版本为1.1.2,并正在向1.2版本更新中。 Fish Speech 虽然仅为亿级参数的模型&…

huggingface datasets 数据集下载

pip install datasets但是国内下载一般由于网络下载失败:ConnectionError: Couldn’t reach ‘reach-vb/pokemon-blip-captions’ on the Hub (ConnectionError) 解决办法(先vp*下载): 下载使用 from datasets import Dataset, …

Cube-Studio:开源大模型全链路一站式中台

开源项目,欢迎star哦,https://github.com/data-infra/cube-studio 一款真正意义的 LLMOps 框架 LLMOps(Large Language Model Operations)是一个涵盖了大型语言模型(如GPT系列)开发、部署、维护和优化的一…

海外报纸媒体投放形式分为哪些?传播当中有什么优势-大舍传媒

国外报纸媒体投放新闻稿作为一种传统而有效的传播方式,依然在现代媒体环境中保持着其独特的价值和权威性。以下几点阐述了报纸媒体宣发的几个关键方面,特别是当通过专业机构如大舍传媒进行操作时: 权威性和公信力:报纸作为历史悠久…

使用瀚高数据库开发管理工具进行数据的备份与恢复---国产瀚高数据库工作笔记008

使用瀚高数据库,备份 恢复数据 然后找到对应的目录 其实就是hgdbdeveloper,瀚高的数据库开发管理工具 对应的包中有个dbclient 这个目录,选中这个目录以后,就可以了,然后 在对应的数据库,比如 data_middle 中,选中 某个模式,比如bigdata_huiju 然后右键进行,点击 恢复,然…

pycharm的usages在哪设置?

参考文章:https://blog.51cto.com/save/8961821 在代码编辑器(如PyCharm或IntelliJ IDEA)中,"1 usage"通常表示当前光标所在的代码元素(如变量、函数、类等)在其他地方被使用了一次。这个功能可…

springboot java.lang.ClassNotFoundException: dm.jdbc.driver.DmDriver 应该如何解决

遇到的问题:项目中引用了外部的达梦jar包 在idea中正常使用 也能找到dm.jdbc.driver.DmDriver 驱动 但是当通过jenkins 构建部署到服务器上 总是报 ClassNotFoundException: dm.jdbc.driver.DmDriver 找不到驱动 应用到的驱动代码如下格式 排查步骤 1.首先看你的项…

怎么将视频字幕提取翻译?字幕提取的方法大全来了

谁说提取视频字幕非得大费周章?其实用专业软件也能轻松搞定字幕转换,让你告别传统繁琐的转文字工作! 想象一下,简单的几个步骤,你的视频就能从屏幕上的文字转化为可编辑的文档。是不是已经迫不及待想要尝试了&#xf…

基于SpringBoot的漫画网站系统

你好呀,我是计算机学姐码农小野!如果有相关需求,可以私信联系我。 开发语言:Java 数据库:MySQL 技术:B/S架构模式、Java技术 工具:Visual Studio、MySQL数据库开发工具 系统展示 首页 用户…

Nginx主配置文件---Nginx.conf

nginx主配置文件的模块介绍 全局块: 全局块是配置文件从开始到 events 块之间的部分,其中指令的作用域是 Nginx 服务器全局。主要指令包括: user:指定可以运行 Nginx 服务的用户和用户组,只能在全局块配置。例如&…

Linux基础指令介绍与详解——原理学习

前言:本节内容标题虽然为指令,但是并不只是讲指令, 更多的是和指令相关的一些原理性的东西。 如果友友只想要查一查某个指令的用法, 很抱歉, 本节不是那种带有字典性质的文章。但是如果友友是想要来学习的,…

Elasticsearch实战教程: 如何在海量级数据中进行快速搜索

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! 引入 Elasticsearch(简称ES)是一个基于Apache Lucene™的开源搜索引擎,无论在开源还是专有领…

【NLP学习笔记】load_dataset加载数据

除了常见的load_dataset(<hf上的dataset名>)这种方式加载HF上的所有数据外&#xff0c;还有其他custom的选项。 加载HF上部分数据 from datasets import load_dataset c4_subset load_dataset("allenai/c4", data_files"en/c4-train.0000*-of-01024.js…

不改代码,实现web.config或app.config的连接字符串加密解密

目的&#xff1a;加密字符串&#xff0c;防止明文显示。 好处&#xff1a;不用修改代码&#xff0c;微软自带功能&#xff0c;自动解密。 web.config 参考相关文章&#xff1a; Walkthrough: Encrypting Configuration Information Using Protected Configuration | Microso…

SQL执行慢排查以及优化思路

数据库服务器的优化步骤 当我们遇到数据库调优问题的时候&#xff0c;该如何思考呢&#xff1f;我把思考的流程整理成了下面这张图。 整个流程划分成了观察&#xff08;Show status&#xff09;和行动&#xff08;Action&#xff09;两个部分。字母 S 的部分代表观察&#xf…

小红书运营教程02

小红书大致会分享10篇左右。微博、抖音、以及视频剪辑等自媒体运营相关技能以及运营教程相关会陆续的进行分享。 上次分享涉及到的对比,母婴系列,或者可以说是服装类型,不需要自己过多的投入,对比知识类博主来说,自己将知识讲述出来,然后要以此账号进行变现就比较麻烦,…

SARscape——GAMMA滤波

目录 一、算法原理1、概述2、参考文献 二、软件操作三、结果展示1、原始图像2、滤波结果 一、算法原理 1、概述 GAMMA滤波器假定数据服从GAMMA 分布&#xff0c;被滤波器滤除的像元将被基于局部统计计算出的方差系数所代替。其数学模型为: F i j { M , C x < C u B M P 2…

gin框架 gin.Context中的Abort方法使用注意事项 - gin框架中立刻中断当前请求的方法

gin框架上下文中的Abort序列方法&#xff08;Abort&#xff0c;AbortWithStatus&#xff0c; AbortWithStatusJSON&#xff0c;AbortWithError&#xff09;他们都不会立刻终止当前的请求&#xff0c;在中间件中调用Abort方法后中间件中的后续的代码会被继续执行&#xff0c;但是…

电子价签能够给零售业带来哪些效益?

在竞争激烈的零售市场中&#xff0c;每一个细微的优化都可能成为吸引顾客和提升效率的关键。随着技术的不断进步&#xff0c;电子价签作为一种革新性的解决方案&#xff0c;正以其独特的优势重新定义零售运营的标准。那它到底能给我们的零售门店带来哪些实际效益&#xff1f; …

Qt时间日期处理与定时器使用总结

一、日期时间数据 1.QTime 用于存储和操作时间数据的类&#xff0c;其中包括小时(h)、分钟(m)、秒(s)、毫秒(ms)。函数定义如下&#xff1a; //注&#xff1a;秒(s)和毫秒(ms)有默认值0 QTime::QTime(int h, int m, int s 0, int ms 0) 若无须初始化时间数据&#xff0c;可…