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

uniapp项目-配置store文件夹

1.创建store.js

说明:创建一个新的 Vuex Store 实例,配置 Store 中的模块。

import Vue from 'vue';
import Vuex from 'vuex';
// 导入两个 Vuex 模块:moduleCart 和 moduleUser
import moduleCart from '@/store/cart.js';
import moduleUser from '@/store/user.js';
//使用vuex
Vue.use(Vuex);
//Vuex store 实例的方法,需要传入一个配置对象modules
const store = new Vuex.Store({modules: {//购物车相关的模块m_cart: moduleCart,//用户相关的模块m_user: moduleUser,},
});
export default store;

2.user.js

说明:

  • 在微信小程序中,使用 Vuex 进行状态管理时,可以通过 this.commit() 方法来触发一个 mutation,并对应传入指定的 mutation 名称。例如,this.commit('m_cart/saveToStorage') 表示触发名为 saveToStorage 的 m_cart 模块的 mutation
  • state用函数的形式。
export default {// 开启当前模块命令空间(必须要)namespaced: true,state: () => ({// 购物车的数据,存储商品信息对象// 默认规定需要6个属性cart: JSON.parse(uni.getStorageSync('cart') || '[]'),}),// 加工mutations: {// 更新所有商品的勾选状态,newState是用户传过来的状态updateAllGoodsState(state, newState) {state.cart.forEach((x) => x.goods_state = newState);// 持久化存储this.commit('m_cart/saveToStorage');},// 永久储存cart信息saveToStorage(state) {uni.setStorageSync('cart', JSON.stringify(state.cart));},// 通过id删除购物车对应的商品信息removeGoodsById(state, goods_id) {// 将商品传来以后,将id相同的过滤掉,留下其他商品信息state.cart = state.cart.filter((x) => x.goods_id !== goods_id);this.commit('m_cart/saveToStorage');},// 更新商品数量updateGoodsCount(state, goods) {const result = state.cart.find((x) => x.goods_id === goods.goods_id);if (result) {result.goods_count = goods.goods_count;// 持久化存储在本地this.commit('m_cart/saveToStorage');}},// 更新购物车商品的勾选状态updateGoodsState(state, goods) {const findResult = state.cart.find((x) => x.goods_id === goods.goods_id);if (findResult) {findResult.goods_state = goods.goods_state;this.commit('m_cart/saveToStorage');}},addToCart(state, goods) {// 根据提交的商品的id,查询购物车是否存在商品,没有的话push就行了const findResult = state.cart.find((x) => x.goods_id === goods.goods_id);// 判断//   console.log(findResult);if (!findResult) {state.cart.push(goods);} else {findResult.goods_count++;// console.log(findResult);}// 触发my_cart命令空间下的方法this.commit('m_cart/saveToStorage');// console.log(state.cart);},},
// 类似计算属性getters: {// 勾选商品的总价格checkGoodsAmount(state) {return state.cart.filter((x) => x.goods_state).reduce((total, item) => total += item.goods_count * item.goods_price, 0).toFixed(2);},// 已经勾选商品的总数量checkedCount(state) {// 过滤出有x.goods_state的值,然后将goods_count进行累加return state.cart.filter((x) => x.goods_state).reduce((total, item) => total += item.goods_count, 0);},// 统计购物车商品的总数量total(state) {let c = 0;// 循环统计商品的数量,累加到变量c中state.cart.forEach((x) => c += x.goods_count);return c;},},
};

相关文章:

uniapp项目-配置store文件夹

1.创建store.js 说明:创建一个新的 Vuex Store 实例,配置 Store 中的模块。 import Vue from vue; import Vuex from vuex; // 导入两个 Vuex 模块:moduleCart 和 moduleUser import moduleCart from /store/cart.js; import moduleUser fr…...

element表格多选实现

表格实现多选 实现表格多选很简单&#xff0c;只需要在表格里加上一列即可&#xff0c;加完之后就会在表格里出现一列白色的四方块按钮&#xff0c;可以多选&#xff0c;也可以单选 <el-table-columntype"selection"width"55"align"center"&…...

宠物智能自动喂食器方案设计

据相关数据表明&#xff0c;2019年全国城镇宠物犬猫数量达到9915万只&#xff0c;增幅达到8.4%&#xff0c;消费市场规模达2024亿元&#xff0c;比2018年增长18.5%&#xff0c;整体呈现持续大幅增长的态势。而养宠人群的主力&#xff0c;为25岁至38岁年轻人&#xff0c;都市白领…...

学习笔记230818---对于promise失败状态处理的重要性

问题描述&#xff1a; 在项目中经常会出现如上的问题&#xff0c;这是因为&#xff0c;用promise封装的接口或第三方组件方法&#xff0c;如果只对成功的状态做处理&#xff0c;就会造成页面出错&#xff0c;报error。 解决方法 then()的末尾加上.catch(()>{})对失败的状态…...

【Redis】什么是缓存击穿,如何预防缓存击穿?

【Redis】什么是缓存击穿&#xff0c;如何预防缓存击穿&#xff1f; 缓存击穿是指一个 Key 非常热点&#xff0c;大并发集中对这一个点进行访问&#xff0c;当这个Key 在失效的瞬间&#xff0c;持续的大并发就会穿破缓存&#xff0c;直接请求数据库。缓存击穿和缓存雪崩的区别…...

Android 13.0 强制app横屏显示

1.概述 在13.0产品定制化开发中,对于处理屏幕旋转方向,首先有kernel底层处理,从底层驱动gsensor 中获取数据,从而判断屏幕方向的,然后事件上报后 最后由WMS就是WindowManagerService 来处理旋转的相关事件 2.强制app横屏显示的核心类 /framework/base/services/java/com…...

平方数之和(力扣)双指针 JAVA

给定一个非负整数 c &#xff0c;你要判断是否存在两个整数 a 和 b&#xff0c;使得 a&#xff3e;2 b&#xff3e;2 c 。 示例 1&#xff1a; 输入&#xff1a;c 5 输出&#xff1a;true 解释&#xff1a;1 * 1 2 * 2 5 示例 2&#xff1a; 输入&#xff1a;c 3 输出&am…...

深入浅出Pytorch函数——torch.nn.init.sparse_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

OpenCV实现BGR2BayerGB/BG格式的转换

1、说明 OpenCV没有提供从BGR生成Bayer格式的接口,需要自己写 OpenCV定义为4种格式,分别为: BGGR排列 -> RG格式 RGGB排列 -> BG格式 GRBG排列 -> GB格式 GBRG排列 -> GR格式 2、转换 void CUtils::BGR2BayerGB(const cv::Mat &matSrc, cv::Mat &matDst)…...

Gateway网关路由以及predicates用法(项目中使用场景)

1.Gatewaynacos整合微服务 服务注册在nacos上&#xff0c;通过Gateway路由网关配置统一路由访问 这里主要通过yml方式说明&#xff1a; route: config: #type:database nacos yml data-type: yml group: DEFAULT_GROUP data-id: jeecg-gateway-router 配置路由&#xff1a;…...

深入浅出Pytorch函数——torch.nn.init.constant_

分类目录&#xff1a;《深入浅出Pytorch函数》总目录 相关文章&#xff1a; 深入浅出Pytorch函数——torch.nn.init.calculate_gain 深入浅出Pytorch函数——torch.nn.init.uniform_ 深入浅出Pytorch函数——torch.nn.init.normal_ 深入浅出Pytorch函数——torch.nn.init.c…...

centos mysql8解决Access denied for user ‘root‘@‘localhost‘ (using password: YES)

环境 系统&#xff1a;CentOS Stream release 9 mysql版本&#xff1a;mysql Ver 8.0.34 for Linux on x86_64 问题 mysql登录提示 Access denied for user rootlocalhost (using password: YES)解决方法 编辑 /etc/my.cnf &#xff0c;在[mysqld] 部分最后添加一行 skip-…...

Docker实战:Docker常用命令

一、镜像相关 1.1、查看镜像 docker images1.2、拉取镜像 docker pull nginx1.3、保存镜像 docker save -o nginx.tar nginx:latest1.4、移除镜像 docker rmi -f nginx:latest1.5、导入镜像 docker load -i nginx.tar二、容器相关 2.1、启动容器 docker run --name red…...

基于51单片机直流电机转速数码管显示控制系统

一、系统方案 本文主要研究了利用MCS-51系列单片机控制PWM信号从而实现对直流电机转速进行控制的方法。本文中采用了三极管组成了PWM信号的驱动系统&#xff0c;并且对PWM信号的原理、产生方法以及如何通过软件编程对PWM信号占空比进行调节&#xff0c;从而控制其输入信号波形等…...

小程序商品如何指定打印机

有些商家&#xff0c;可能有多个仓库。不同的仓库&#xff0c;存放不同的商品。当客户下单时&#xff0c;小程序如何自动按照仓库拆分订单&#xff0c;如何让打印机自动打印对应仓库的订单呢&#xff1f;下面就来介绍一下吧。 1. 设置订单分发模式。进入管理员后台&#xff0c…...

LLaMA-7B微调记录

Alpaca&#xff08;https://github.com/tatsu-lab/stanford_alpaca&#xff09;在70亿参数的LLaMA-7B上进行微调&#xff0c;通过52k指令数据&#xff08;https://github.com/tatsu-lab/stanford_alpaca/blob/main/alpaca_data.json&#xff09;&#xff0c;在8个80GB A100上训…...

域名子目录发布问题(nginx、vue-element-admin、uni-app)

域名子目录发布问题&#xff08;nginx、vue-element-admin、uni-app&#xff09; 说明Vue-Element-Admin 代码打包nginx配置&#xff1a;uni-app打包 说明 使用一个域名下子目录进行打包&#xff1a; 比如&#xff1a; http://www.xxx.com/merchant 商户端代码 http://www.xx…...

【环境配置】Windows 10 安装 PyTorch 开发环境,以及验证 YOLOv8

Windows 10 安装 PyTorch 开发环境&#xff0c;以及验证 YOLOv8 最近搞了一台Windows机器&#xff0c;准备在上面安装深度学习的开发环境&#xff0c;并搭建部署YOLOv8做训练和测试使用&#xff1b; 环境&#xff1a; OS&#xff1a; Windows 10 显卡&#xff1a; RTX 3090 安…...

数学建模之“层次分析法”原理和代码详解

一、层次分析法简介 层次分析法&#xff08;Analytic Hierarchy Process&#xff0c;AHP&#xff09;是一种用于多准则决策分析和评估问题的定量方法&#xff0c;常用于数学建模中。它是由数学家托马斯赛蒂&#xff08;Thomas Saaty&#xff09;开发的。 层次分析法将复杂的决…...

使用IText导出复杂pdf

1、问题描述 需要将发票导出成pdf&#xff0c;要求每页都必须包含发票信息和表头行。 2、解决方法 使用IText工具实现PDF导出 IText8文档&#xff1a;Examples (itextpdf.com) 3、我的代码 引入Itext依赖&#xff0c;我这里用的是8.0.1版本 <dependency><groupId>…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

C#学习第29天:表达式树(Expression Trees)

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

tauri项目,如何在rust端读取电脑环境变量

如果想在前端通过调用来获取环境变量的值&#xff0c;可以通过标准的依赖&#xff1a; std::env::var(name).ok() 想在前端通过调用来获取&#xff0c;可以写一个command函数&#xff1a; #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...

pycharm 设置环境出错

pycharm 设置环境出错 pycharm 新建项目&#xff0c;设置虚拟环境&#xff0c;出错 pycharm 出错 Cannot open Local Failed to start [powershell.exe, -NoExit, -ExecutionPolicy, Bypass, -File, C:\Program Files\JetBrains\PyCharm 2024.1.3\plugins\terminal\shell-int…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

算法250609 高精度

加法 #include<stdio.h> #include<iostream> #include<string.h> #include<math.h> #include<algorithm> using namespace std; char input1[205]; char input2[205]; int main(){while(scanf("%s%s",input1,input2)!EOF){int a[205]…...

表单设计器拖拽对象时添加属性

背景&#xff1a;因为项目需要。自写设计器。遇到的坑在此记录 使用的拖拽组件时vuedraggable。下面放上局部示例截图。 坑1。draggable标签在拖拽时可以获取到被拖拽的对象属性定义 要使用 :clone, 而不是clone。我想应该是因为draggable标签比较特。另外在使用**:clone时要将…...