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

Pinia2

一、入门案例

1、安装

npm i pinia -S

2、注册插件

//main.ts

import { createPinia } from 'pinia'

app.use(createPinia())

3、创建store/countStore.ts

import { defineStore } from "pinia";

const useCounterStore = defineStore('counterStore',{

    state(){

        return{

            count:0

        }

    },

    actions:{

        add(){

            this.count++

        }

    }

})

export default useCounterStore

4、使用App.vue

<template>

  <div>

    {{ count }}

    <button @click="add">点我加一</button>

  </div>

</template>

<script setup lang='ts'>

import useCounterStore from './store/countStore';

import { storeToRefs } from 'pinia';

const counterStore = useCounterStore()

const {count} = storeToRefs(counterStore) //storeToRefs让其成为响应式

const add = counterStore.add

</script>

二、购物车案例

1、新建一个列表的productStore.js的文件

import { defineStore } from "pinia";
import axios from 'axios'const useProductStore = defineStore('productStore',{state(){return{products:[]}},actions:{async loadDate(){let res = await axios.get("http://localhost:9000/data")this.products = res.dataconsole.log(res);}}})export default useProductStore

2、购物车的商品cartStore.js

import { defineStore } from "pinia";const useCartStore = defineStore("cartStore", {state() {return {carts: [],};},actions: {add(product) {const pro = this.carts.find((value) => {console.log(value);return product.id === value.id;});product.inventory--if (pro) {pro.quality++;} else {this.carts.push({ ...product, quality: 1 });}},},getters:{total(){return this.carts.reduce((pre,cur)=>{return pre += cur.quality * cur.price},0)}}
});
export default useCartStore;

3.使用App.vue

<template><div><h1>产品列表</h1><hr><ul><li v-for="i in products">{{ i.name }} -- ¥{{ i.price }}<button @click="cartStore.add(i)" :disabled="i.inventory <= 0">放入购物车</button></li></ul><h1>购物车</h1><hr><ul><li v-for="i in carts">姓名:{{ i.name }} ---价格:{{ i.price }} ----- 数量:{{ i.quality }} ---商品总价:{{ i.quality * i.price }}</li></ul><h1>总价格:{{ total }}</h1></div></template><script setup lang='ts'>
import { storeToRefs } from "pinia";
import { onMounted } from "vue";
import useProductStore from "./store/productorStore"
import useCartStore from "./store/cartStore"const productStore = useProductStore()
const cartStore = useCartStore()
const { products } = storeToRefs(productStore)
const { carts,total } = storeToRefs(cartStore)onMounted(()=>{productStore.loadDate()
})</script><style scoped lang='scss'></style>

三、模拟后台接口

1.新建一个json文件

{"data":[{"id":1,"name":"iphone12","price":12000,"inventory":3},{"id":2,"name":"小米10","price":3000,"inventory":10},{"id":3,"name":"华为","price":5000,"inventory":7}]
}

2、安装json-server

npm i json-server -g

3、使用

json-server ./src/data/api.json -p 9000 

相关文章:

Pinia2

一、入门案例 1、安装 npm i pinia -S 2、注册插件 //main.ts import { createPinia } from pinia app.use(createPinia()) 3、创建store/countStore.ts import { defineStore } from "pinia"; const useCounterStore defineStore(counterStore,{ state(){ return{…...

服务器配置 | 在Windows本地打开服务器端Tensorboard结果

文章目录方法1&#xff1a;直接cmd使用ssh登录远程服务器方法2&#xff1a;利用Xshell设置本地端口进行监听方法3&#xff1a;利用MobaXterm设置本地端口监听这里介绍三个方法&#xff0c;在在Windows本地打开服务器端Tensorboard结果 方法1&#xff1a;直接cmd使用ssh登录远程…...

13 nuxt3学习(新建页面 内置组件 assets 路由)

新建页面 Nuxt项目中的页面是在 pages目录 下创建的 在pages目录创建的页面&#xff0c;Nuxt会根据该页面的目录结构和其文件名来自动生成对应的路由。页面路由也称为文件系统路由器&#xff08;file system router&#xff09;&#xff0c;路由是Nuxt的核心功能之一 方式一…...

Linus命令记录(持续编辑版)

目录 一、前言 二、2023年2月查找Linus命令记录 1、竖线 |&#xff0c;双竖线 ||&#xff0c;&和&& 2、wc 3、free 和 top 4、c 库函数 strcpy() 5、c 库函数 memmove() 6、open 三、2023年3月查找Linus命令记录 1、sort 2、uniq 一、前言 有时候遇到不…...

玩转ThreadLocal

前言 ThreadLocal想必都不陌生&#xff0c;当多线程访问同一个共享变量时&#xff0c;就容易出现并发问题&#xff0c;为了保证线程安全&#xff0c;我们需要对共享变量进行同步加锁&#xff0c;但这又带来了性能消耗以及使用者的负担&#xff0c;那么有没有可能当我们创建一个…...

亚马逊二审来袭,跨境电商传统验证算法真的靠谱吗?

多个大卖突遭二审 已有卖家账号被封 近期有不少卖家在论坛上反映称自己收到了亚马逊的二次视频验证邮件。 邮件上称&#xff1a; 卖家必须要完成额外的身份审查&#xff0c;才有资格在亚马逊继续销售商品&#xff1b;亚马逊要求卖家出示注册时提交的身份证原件和营业执照原件…...

微信小程序|基于小程序+云开发制作一个租房小程序

经济发展的同时伴随着大批人群的流动,租房需求一直是持久不衰的话题,如何租好房,好租房,跟随此文一起制作一个租房小程序,让租房不再困难。 一、小程序1. 创建小程序2. 首页3. 房源列表页4. 房源详情页5. 个人中心页</...

2.4 群辉驱动:多网口,系统网络只能识别两个网口 解决教程

所需工具下载&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1CMLl6waOuW-Ys2gKZx7Jgg?pwdchct提取码&#xff1a;chct安装的黑群晖华硕z490i主板自带一个i225 2.5G&#xff0c;后又插了一个4口8125B四口网卡&#xff0c;发现控制面板->网络->网络界面 只识别了其…...

Android正确使用资源res文件

观看此文注意首先有的UI改颜色&#xff0c;没用&#xff0c;发现无法更改按钮背景颜色。我的AS下载的是最新版本&#xff0c;Button按钮的背景颜色一直都是亮紫色&#xff0c;无法更改。为什么呢&#xff1f;首先在你的清单文件中看你应用的是哪个主题。我现在用的是这个可能你…...

5分钟搭建第一个k8s集群

急速上手Minikube搭建单节点 k8s集群实战什么是Minikube?环境准备安装步骤一.安装Docker1.安装yml2.设置阿里云镜像3.查看可安装的docker版本4. 安装docker5. 查看docker版本6.配置docker开机自启动7. 启动docker, 查看docker 启动状态二.安装k8s1.配置镜像源2.安装kubectl3.安…...

【MySQL】查询操作(基础篇)

目录 1、查询操作(Retrieve) 1.1 全列查询 1.2 指定列查询 1.3 查询字段为表达式 1.4 别名 1.5 去重&#xff1a;DISTINCT 1.6 排序&#xff1a;ORDER BY 1.7 条件查询&#xff1a;WHERE 1.8 分页查询 1、查询操作(Retrieve) 查询操作算的上是 SQL 中最复杂的操作了…...

工程管理系统+spring cloud 系统管理+java 系统设置+二次开发

工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#xff1a;实现对数据字典标签的增删改查操作 2、编码管理&#xff1a;实现对系统编码的增删改查操作 3、用户管理&#xff1a;管理和查看用户角色 4、菜单管理&#xff1a;实现对系统菜单的增删改查操…...

MyBatisPlus Study Notes

文章目录1 MyBatisPlus概述1.1 MyBatis介绍1.2 MyBatisPlus特性2 标准数据层开发2.1 MyBatisPlus的CRUD操作API2.2 分页功能接口实现2.2.1 config&#xff08;配置层&#xff09;拦截器实现2.2.2 Dao(Mapper)数据访问层&#xff08;CRUD&#xff09;操作2.2.3 Junit单元测试进行…...

【Vu3 测试篇】自动化测试

一、为什么需要测试 自动化测试能够预防无意引入的 bug&#xff0c;并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一样&#xff0c;新的 Vue 应用可能会以多种方式崩溃&#xff0c;因…...

Android system实战 — Android R(11) 第三方apk权限

Android system实战 — 第三方apk权限问题0. 前言1. 源码实现1.1 主要函数1.2 修改思路和实现1.2.1 修改思路1.2.2 方案一1.2.3 方案二0. 前言 最近在调试时遇到了第三方apk申请运行时权限&#xff0c;以及signature级别 install 权限不允许赋予给第三方apk&#xff0c;虽然这是…...

面试总结1

这里写目录标题什么是ORM&#xff1f;为什么mybatis是半自动的ORM框架&#xff1f;动态sqlJDBC步骤&#xff1a;jdbc的缺点&#xff1a;JDBC,MyBatis的区别&#xff1a;MyBatis相比JDBC的优势缓存一级缓存一级缓存在下面情况会被清除二级缓存最近在面试&#xff0c;发现了许多自…...

【Hello Linux】程序地址空间

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;简单介绍下进程地址空间 程序地址空间程序地址空间语言中的程序地址空间矛盾系统中的程序地址空间为什么要有进程地址空间思维导图总结…...

电脑崩溃蓝屏问题如何重装系统

电脑是我们日常生活和工作中必不可少的工具&#xff0c;但在使用过程中&#xff0c;难免会遇到各种问题&#xff0c;例如系统崩溃、蓝屏、病毒感染等&#xff0c;这些问题会严重影响我们的使用体验和工作效率。而小白一键重装系统可以帮助我们快速解决这些问题&#xff0c;本文…...

《商用密码应用与安全性评估》第一章密码基础知识1.2密码评估基本原理

商用密码应用安全性评估&#xff08;简称“密评”&#xff09;的定义&#xff1a;在采用商用密码技术、产品和服务集成建设的网络与信息系统中&#xff0c;对其密码应用的合规性、正确性、有效性等进行评估 信息安全管理过程 相关标准 国际:ISO/IEC TR 13335 中国:GB/T …...

【编程基础之Python】7、Python基本数据类型

【编程基础之Python】7、Python基本数据类型Python基本数据类型整数&#xff08;int&#xff09;基本的四则运算位运算比较运算运算优先级浮点数&#xff08;float&#xff09;布尔值&#xff08;bool&#xff09;字符串&#xff08;str&#xff09;Python数据类型变换隐式类型…...

ArcSWAT实战避坑指南 | 从数据库配置到模型运行,详解常见报错与高效解决方案

1. ArcSWAT入门避坑&#xff1a;从安装到首次运行的关键准备 第一次接触ArcSWAT的水文研究者&#xff0c;往往会在安装环节就踩坑。我见过太多人因为版本兼容性问题&#xff0c;导致后续模型根本无法启动。这里分享几个血泪教训&#xff1a; ArcGIS版本选择是首要关键。虽然官方…...

HunyuanVideo-Foley实战案例:为AI生成视频自动匹配Foley音效工作流

HunyuanVideo-Foley实战案例&#xff1a;为AI生成视频自动匹配Foley音效工作流 1. 项目背景与价值 在视频制作领域&#xff0c;Foley音效&#xff08;环境音、动作音效等&#xff09;的创作往往需要专业录音设备和大量人工处理。HunyuanVideo-Foley创新性地将视频生成与音效生…...

springboot汽车配件商城销售管理系统

目录系统架构设计数据库设计核心功能实现销售管理模块库存预警功能报表统计模块系统测试策略部署方案项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作系统架构设计 采用SpringBoot作为后端框架&#xff0c;搭配MyBatis或JPA实现…...

MAAAssistantArknights:智能自动化的明日方舟游戏助手解决方案

MAAAssistantArknights&#xff1a;智能自动化的明日方舟游戏助手解决方案 【免费下载链接】MaaAssistantArknights 一款明日方舟游戏小助手 项目地址: https://gitcode.com/GitHub_Trending/ma/MaaAssistantArknights 价值解析&#xff1a;如何通过三大核心技术解决玩家…...

在给ppt接入扣子空间(Ai)/智能体,新玩法10分钟搞定说课,公开课AI互动!

做 PPT 时&#xff0c;你是否遇到过这些痛点&#xff1a;演讲中观众突然提问&#xff0c;临时组织语言容易逻辑混乱&#xff1b;同一问题被反复询问&#xff0c;浪费演示时间&#xff1b;静态页面无法按需补充细节&#xff0c;信息传递不精准。而扣子空间&#xff08;Coze&…...

开源压枪系统:基于像素识别技术的后坐力补偿解决方案

开源压枪系统&#xff1a;基于像素识别技术的后坐力补偿解决方案 【免费下载链接】Apex-NoRecoil-2021 Scripts to reduce recoil for Apex Legends. (auto weapon detection, support multiple resolutions) 项目地址: https://gitcode.com/gh_mirrors/ap/Apex-NoRecoil-202…...

OSMnx实战:从OpenStreetMap到GeoPackage,高效构建城市路网分析数据库

1. 为什么选择OSMnx和GeoPackage处理城市路网数据 第一次接触城市路网分析时&#xff0c;我被各种数据格式搞得头大。直到发现OSMnx这个神器&#xff0c;配合GeoPackage格式&#xff0c;工作效率直接翻倍。OSMnx是Python生态中专门处理OpenStreetMap数据的工具包&#xff0c;它…...

LibreOffice无界面转换实战:用Python在Linux服务器实现DOCX批量转PDF

LibreOffice无界面转换实战&#xff1a;用Python在Linux服务器实现DOCX批量转PDF 在当今企业级文档处理流程中&#xff0c;自动化转换办公文档格式已成为提升效率的关键环节。对于部署在Linux服务器上的文档处理系统而言&#xff0c;如何在不依赖图形界面的情况下&#xff0c;稳…...

英飞凌Aurix2G TC3XX 中断路由与DMA联动实战解析

1. 中断与DMA联动的核心价值 第一次接触英飞凌Aurix2G TC3XX的中断路由功能时&#xff0c;我像发现新大陆一样兴奋。传统嵌入式开发中&#xff0c;ADC采样完成→CPU读取数据→存入内存的流程就像用勺子一勺一勺地运水&#xff0c;而中断触发DMA的机制则像接上了自来水管——数据…...

PT插件配置完全指南:从基础到进阶的全方位解决方案

PT插件配置完全指南&#xff1a;从基础到进阶的全方位解决方案 【免费下载链接】PT-Plugin-Plus PT 助手 Plus&#xff0c;为 Microsoft Edge、Google Chrome、Firefox 浏览器插件&#xff08;Web Extensions&#xff09;&#xff0c;主要用于辅助下载 PT 站的种子。 项目地址…...