当前位置: 首页 > 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数据类型变换隐式类型…...

FSCalendar终极指南:打造完美iOS日历体验的完整教程

FSCalendar终极指南&#xff1a;打造完美iOS日历体验的完整教程 【免费下载链接】FSCalendar A fully customizable iOS calendar library, compatible with Objective-C and Swift 项目地址: https://gitcode.com/gh_mirrors/fs/FSCalendar FSCalendar是一款功能强大且…...

JPEXS Free Flash Decompiler与Web3.0存储:去中心化SWF文件管理的终极指南

JPEXS Free Flash Decompiler与Web3.0存储&#xff1a;去中心化SWF文件管理的终极指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler JPEXS Free Flash Decompiler是一款功能强大的开源…...

基于LSTM的短期电力负荷预测研究

【负荷预测】基于LSTM短期负荷预测&#xff0c;可考虑需求响应 短期电力负荷预测在电力系统的调度、生产和规划中起着重要的作用&#xff0c;精准的负荷预测有利于决策者做出正确决策计划以及有利于电力系统的稳定运行。 多个售电主体的市场竞争带来了电价的波动&#xff0c;以…...

3个步骤玩转虚拟手柄模拟:ViGEmBus驱动从入门到精通

3个步骤玩转虚拟手柄模拟&#xff1a;ViGEmBus驱动从入门到精通 【免费下载链接】ViGEmBus Windows kernel-mode driver emulating well-known USB game controllers. 项目地址: https://gitcode.com/gh_mirrors/vi/ViGEmBus Windows虚拟手柄驱动技术为游戏玩家和开发者…...

别再手动对齐了!Excel双坐标折线图保姆级教程,5分钟搞定销售与成本对比分析

Excel双坐标折线图实战&#xff1a;销售与成本可视化分析的进阶技巧 当市场专员小林第一次尝试将季度销售额&#xff08;单位&#xff1a;万元&#xff09;和成本率&#xff08;单位&#xff1a;百分比&#xff09;放在同一张图表时&#xff0c;她发现了一个尴尬的现象——代表…...

追踪Elsevier审稿进度:开源工具如何提升学术投稿效率

追踪Elsevier审稿进度&#xff1a;开源工具如何提升学术投稿效率 【免费下载链接】Elsevier-Tracker 项目地址: https://gitcode.com/gh_mirrors/el/Elsevier-Tracker 学术出版流程中&#xff0c;审稿进度的不确定性常给研究者带来困扰。Elsevier作为全球领先的学术出版…...

4步突破AI算法学习瓶颈:用Excel可视化打开深度学习黑箱

4步突破AI算法学习瓶颈&#xff1a;用Excel可视化打开深度学习黑箱 【免费下载链接】ai-by-hand-excel 项目地址: https://gitcode.com/gh_mirrors/ai/ai-by-hand-excel 传统AI算法学习常陷入"公式理解难、数据流向抽象、参数调整盲目"的三重困境&#xff0c…...

为什么你的Python多解释器程序总在崩溃?进程隔离、对象序列化与引用计数泄漏全链路诊断,立即修复

第一章&#xff1a;Python多解释器通信的底层本质与崩溃根源Python 多解释器&#xff08;Multi-Interpreter&#xff0c;PEP 684&#xff09;是 CPython 3.12 引入的核心机制&#xff0c;旨在实现真正的并行解释器隔离——每个解释器拥有独立的全局状态&#xff08;如 sys.modu…...

基于Python+Hadoop+Spark的美食推荐系统 数据采集与可视化平台 Django框架

1、项目介绍 技术栈 Python语言、Django框架、Scrapy爬虫框架、Echarts 可视化&#xff0c;采集下厨房网站数据。功能模块推荐美食美食用料排行榜分析美食分类占比分析饮食科普美食分类美食详情信息美食详情做法后台数据管理项目介绍本项目基于指定技术栈&#xff0c;爬取下厨房…...

苹果内购Java后端避坑指南:沙盒测试、凭据验证与订单防重的那些事儿

苹果内购Java后端避坑指南&#xff1a;沙盒测试、凭据验证与订单防重的那些事儿 第一次对接苹果应用内购&#xff08;IAP&#xff09;时&#xff0c;我以为按照官方文档走完流程就万事大吉了。直到凌晨三点收到服务器告警——重复充值、验证超时、沙盒环境漏测等问题接踵而至。…...