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

踩坑日记 《正确的使用Vuex》基于 uniapp Vue3 setup 语法糖 vuex4 项目 太多坑了要吐了

踩坑日记 《正确的使用Vuex》基于 uniapp Vue3 setup 语法糖 vuex4 项目 太多坑了要吐了

完美解决页面数据不刷新 或者数据慢一步刷新

  • 页面使用
  • html
<template><view><template v-if="cartData.data.length>0"><!-- 自定义导航栏 --><view class="box-bg" style="font-size: 36rpx;"><!-- <uni-nav-bar shadow left-icon="left" right-icon="cart" title="购物车" /> --><uni-nav-bar shadow fixed="true" left-icon="left" :right-text="isEdit?'完成':'编辑'" title="购物车"statusBar="true" @clickRight="isEdit=!isEdit" /></view><!-- 商品内容 --><view class="shop-info"><view class="shop-item" v-for="(items, index) in cartData.data" :key="index"><label class="radio"><radio value="" color="#F33" @tap="selectedItemOne(index)" :checked="items.checked" /><text></text></label><image class="shop-image" :src="items.imgUrl" mode=""></image><!-- 文字 --><view class="shop-text"><view class="shop-name">{{items.name}}</view><view class="shop-color f-color">颜色:{{items.color}}</view><view class="shop-price-num"><view class="shop-price">¥{{items.nprice}}</view><view class="shop-num">x {{items.num}}</view></view></view></view></view><!-- 底部内容 --><view class="shop-foot"><label class="foot-radio">{{checkedall.data}}<radio value="" color="#F33" @tap="checkAllFunc" :checked="checkedall.data" /><text>全选</text></label><view class="foot-text"><view class="foot-center"><view class="foot-count">合计:¥<span class="f-active-color">0</span><view class="foot-tips">不包含运费</view></view></view><view class="foot-num">结算(0)</view></view></view></template><template v-else><!-- 自定义导航栏 --><view class="box-bg" style="font-size: 36rpx;"><!-- <uni-nav-bar shadow left-icon="left" right-icon="cart" title="购物车" /> --><uni-nav-bar statusBar="true" fixed="true" title="购物车" /></view><view><image class="shop-info-else" src="../../static/cartImage/isNull.png"></image></view></template></view>
</template>
  • javascript
<script setup>import {ref,reactive,computed,} from "vue"import {useStore} from 'vuex'import store from '@/store/index.js'// 购物车商品数据const cartData = reactive({data: computed(() => {return store.state.cart.cartData})})console.log(cartData.data);// 全选const checkAllFunc = () => {store.dispatch("checkAllFunc")}// 获取全选状态const checkedall = reactive({data: computed(() => {return store.getters["checkedAll"]})})// 全选const selectedItemOne = (index) => {store.commit("oneCheck", index)}// 编辑 or 确定const isEdit = ref(false)
</script>
  • store
    • index.js
import { createStore } from 'vuex'
import cart from "@/store/modules/cart.js"
export default createStore({modules: {cart,}
})
  • store
    • modules
      • cart.js
const getDefaultState = () => {return {// token: getToken(),cartData: [{checked: false,id: 1,name: "正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙",color: "哈哈短会十大",imgUrl: "../../static/shopImage/shopInfo/jk02.png",nprice: "999",num: 1,},{checked: false,id: 2,name: "正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙",color: "哈哈短会十大",imgUrl: "../../static/shopImage/shopInfo/jk02.png",nprice: "99",num: 2,},{checked: false,id: 3,name: "正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙",color: "哈哈短会十大",imgUrl: "../../static/shopImage/shopInfo/jk02.png",nprice: "990",num: 1,},{checked: false,id: 4,name: "正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙",color: "哈哈短会十大",imgUrl: "../../static/shopImage/shopInfo/jk02.png",nprice: "990",num: 1,},{checked: false,id: 5,name: "正版护奶裙日系jk制服套装显瘦学院风甜美背带连衣裙夏季中长裙子甜美背带连衣裙夏季中长裙",color: "哈哈短会十大",imgUrl: "../../static/shopImage/shopInfo/jk02.png",nprice: "990",num: 1,},],selectList: []}
}const state = getDefaultState()
const getters = {// 判断是否全选checkedAll(state) {return state.cartData.length == state.selectList.length;}
}
const mutations = {// 全选checkAll(state) {state.selectList = state.cartData.map(v => {v.checked = true;return v.id})},// 不全选unCheckAll(state) {state.cartData.forEach(v => {v.checked = false;})console.log(state.cartData);state.selectList = [];},// 单选oneCheck(state, index) {let id = state.cartData[index].id; // 查询 原数组 idlet res = state.selectList.indexOf(id); // 原数组的 id 是否存在于空数组 res 返回存在位置if (res > -1) {state.cartData[index].checked = false;return state.selectList.splice(res, 1);}state.cartData[index].checked = true;state.selectList.push(id);;}
}
const actions = {checkAllFunc({commit,getters}) {getters.checkedAll ? commit("unCheckAll") : commit("checkAll")}
}export default {state,getters,mutations,actions
}
  • main.js
import App from './App'// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import { createApp } from 'vue'
import store from 'store/index.js'
const app = createApp(App)
app.use(store).mount('#app')
// Vue.config.productionTip = false
// #endif// #ifdef VUE3
import {createSSRApp
} from 'vue'
export function createApp() {const app = createSSRApp(App)return {app}
}
// #endif

相关文章:

踩坑日记 《正确的使用Vuex》基于 uniapp Vue3 setup 语法糖 vuex4 项目 太多坑了要吐了

踩坑日记 《正确的使用Vuex》基于 uniapp Vue3 setup 语法糖 vuex4 项目 太多坑了要吐了 完美解决页面数据不刷新 或者数据慢一步刷新 页面使用html <template><view><template v-if"cartData.data.length>0"><!-- 自定义导航栏 --><…...

Python无废话-办公自动化Excel修改数据

如何修改Excel 符合条件的数据&#xff1f;用Python 几行代码搞定。 需求&#xff1a;将销售明细表的产品名称为PG手机、HW手机、HW电脑的零售价格分别修改为4500、5500、7500&#xff0c;并保存Excel文件。如下图 Python 修改Excel 数据&#xff0c;常见步骤&#xff1a; 1&…...

MySQL系统架构设计

MySQL 一、MySQL整体架构1.1 SQL接口1.2 解析器 Parser1.3 查询优化器 Optimizer1.3.1 逻辑优化1.3.2 物理优化1.3.3 explain1.4 缓存 Cache1.5 存储引擎 Stroage Management1.6 一条查询SQL的执行流程二、缓存池(Buffer Pool)2.1 Buffer Pool 预读机制2.2 Buffer Pool free链…...

Google vs IBM vs Microsoft: 哪个在线数据分析师证书最好

Google vs IBM vs Microsoft: 哪个在线数据分析师证书最好&#xff1f; 对目前市场上前三个数据分析师证书进行审查和比较|Madison Hunter 似乎每个重要的公司都推出了自己版本的同一事物&#xff1a;专业数据分析师认证&#xff0c;旨在使您成为雇主的下一个热门商品。 随着…...

数据链路层 MTU 对 IP 协议的影响

在介绍主要内容之前&#xff0c;我们先来了解一下数据链路层中的"以太网" 。 “以太网”不是一种具体的网络&#xff0c;而是一种技术标准&#xff1b;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容。 下面我们再来了解一下以太网数据帧&#xff…...

一文拿捏基于redis的分布式锁、lua、分布式性能提升

1.分布式锁 jdk的锁&#xff1a; 1、显示锁&#xff1a;Lock 2、隐式锁&#xff1a;synchronized 使用jdk锁保证线程的安全性要求&#xff1a;要求多个线程必须运行在同一个jvm中 但现在的系统基本都是分布式部署的&#xff0c;一个应用会被部署到多台服务器上&#xff0c;s…...

机器学习必修课 - 如何处理缺失数据

运行环境&#xff1a;Google Colab 处理缺失数据可简单分为两种方法&#xff1a;1. 删除具有缺失值的列 2. 填充 !git clone https://github.com/JeffereyWu/Housing-prices-data.git下载数据集 import pandas as pd from sklearn.model_selection import train_test_split导…...

阿里云服务器方升架构、自研硬件、AliFlash技术创新

阿里云服务器技术创新&#xff1a;服务器方升架构及自研硬件、自研存储硬件AliFlash和阿里云异构计算加速平台&#xff0c;阿里云百科分享阿里云服务器有哪些技术创新&#xff1a; 目录 服务器技术创新 服务器方升架构及自研硬件 自研存储硬件AliFlash 阿里云异构计算加速…...

知识工程---neo4j 5.12.0+GDS2.4.6安装

&#xff08;已安装好neo4j community 5.12.0&#xff09; 一. GDS下载 jar包下载地址&#xff1a;https://neo4j.com/graph-data-science-software/ 下载得到一个zip压缩包&#xff0c;解压后得到jar包。 二. GDS安装及配置 将解压得到的jar包放入neo4j安装目录下的plugi…...

BUUCTF reverse wp 81 - 85

[SCTF2019]babyre 反编译失败, 有花指令 有一个无用字节, 阻止反编译, patch成0x90 所有标红的地方nop掉之后按p重申函数main和loc_C22, F5成功 int __cdecl main(int argc, const char **argv, const char **envp) {char v4; // [rspFh] [rbp-151h]int v5; // [rsp10h] [rb…...

数据结构-哈希表

系列文章目录 1.集合-Collection-CSDN博客​​​​​​ 2.集合-List集合-CSDN博客 3.集合-ArrayList源码分析(面试)_喜欢吃animal milk的博客-CSDN博客 4.数据结构-哈希表_喜欢吃animal milk的博客-CSDN博客 文章目录 目录 系列文章目录 文章目录 前言 一 . 什么是哈希表&a…...

深度学习在图像识别领域还有哪些应用?

深度学习在图像识别领域的应用非常广泛&#xff0c;除了之前提到的图像分类、目标检测、语义分割和图像生成&#xff0c;还有其他一些应用。 图像超分辨率重建&#xff1a;深度学习技术可以用于提高图像的分辨率&#xff0c;例如通过使用生成对抗网络&#xff08;GAN&#xff…...

前端项目练习(练习-005-webpack-03)

学习前&#xff0c;首先&#xff0c;创建一个web-005项目&#xff0c;内容和web-004一样。&#xff08;注意将package.json中的name改为web-005&#xff09; 前面的代码中&#xff0c;打包工作已经基本完成了&#xff0c;下面开始在本地启动项目。这里需要用到webpack-dev-serv…...

『力扣每日一题10』:字符串中的单词数

因为身体原因&#xff0c;再加上学校的 DeadLine 比较多&#xff0c;太忙太累&#xff0c;拖更了半个月。现在开始重拾日更&#xff0c;期待我们一起遇见更好的自己&#xff01; 一、题目 统计字符串中的单词个数&#xff0c;这里的单词指的是连续的不是空格的字符。 请注意&a…...

初级篇—第三章多表查询

文章目录 为什么需要多表查询一个案例引发的多表连接初代查询笛卡尔积&#xff08;或交叉连接&#xff09;的理解 多表查询分类等值连接 vs 非等值连接自连接 vs 非自连接内连接VS外连接 SQL99语法实现多表查询内连接的实现外连接的实现左外连接右外连接满外连接 UNION的使用7种…...

<Xcode> Xcode IOS无开发者账号打包和分发

关于flutter我们前边聊到的初入门、数据解析、适配、安卓打包、ios端的开发和黑苹果环境部署&#xff0c;但是对于苹果的打包和分发&#xff0c;我只是给大家了一个链接&#xff0c;作为一个顶级好男人&#xff0c;我认为这样是对大家的不负责任&#xff0c;那么这篇就主要是针…...

vertx的学习总结2

一、什么是verticle verticle是vertx的基本单元&#xff0c;其作用就是封装用于处理事件的技术功能单元 &#xff08;如果不能理解&#xff0c;到后面的实战就可以理解了&#xff09; 二、写一个verticle 1. 引入依赖&#xff08;这里用的是gradle&#xff0c;不会吧&#…...

网络安全内网渗透之DNS隧道实验--dnscat2直连模式

目录 一、DNS隧道攻击原理 二、DNS隧道工具 &#xff08;一&#xff09;安装dnscat2服务端 &#xff08;二&#xff09;启动服务器端 &#xff08;三&#xff09;在目标机器上安装客户端 &#xff08;四&#xff09;反弹shell 一、DNS隧道攻击原理 在进行DNS查询时&#x…...

探索ClickHouse——连接Kafka和Clickhouse

安装Kafka 新增用户 sudo adduser kafka sudo adduser kafka sudo su -l kafka安装JDK sudo apt-get install openjdk-8-jre下载解压kafka 可以从https://downloads.apache.org/kafka/下找到希望安装的版本。需要注意的是&#xff0c;不要下载路径包含src的包&#xff0c;否…...

基于监督学习的多模态MRI脑肿瘤分割,使用来自超体素的纹理特征(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

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

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

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

第八部分:阶段项目 6:构建 React 前端应用

现在&#xff0c;是时候将你学到的 React 基础知识付诸实践&#xff0c;构建一个简单的前端应用来模拟与后端 API 的交互了。在这个阶段&#xff0c;你可以先使用模拟数据&#xff0c;或者如果你的后端 API&#xff08;阶段项目 5&#xff09;已经搭建好&#xff0c;可以直接连…...