踩坑日记 《正确的使用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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络(文章链接汇总)

参考引用 计算机网络微课堂-湖科大教书匠计算机网络&#xff08;第7版&#xff09;-谢希仁 计算机网络&#xff08;一&#xff09;&#xff1a;概述计算机网络&#xff08;二&#xff09;&#xff1a;物理层计算机网络&#xff08;三&#xff09;&#xff1a;数据链路层计算机网…

SystemUI导航栏

SystemUI导航栏 1、系统中参数项1.1 相关开关属性2.2 属性设置代码 2、设置中设置“三按钮”导航更新流程2.1 属性资源覆盖叠加2.2 SystemUI导航栏接收改变广播2.3 SystemUI导航栏布局更新2.4 时序图 android13-release 1、系统中参数项 1.1 相关开关属性 设置->系统->…

测试用例的编写(面试常问)

作者&#xff1a;爱塔居 专栏&#xff1a;软件测试 作者简介&#xff1a;不断总结&#xff0c;才能变得更好~踩过的坑&#xff0c;不能再踩~ 文章简介&#xff1a;常见的几个测试用例。 一、淘宝购物车 二、登录页面 三、三角形测试用例 abc结果346普通三角形333等边三角形334…

【vue 首屏加载优化】

Vue 首屏加载优化指的是通过一系列的技术手段&#xff0c;尽可能地缩短首屏&#xff08;即页面中可见的部分&#xff09;的加载时间&#xff0c;提高用户体验。 以下是一些常见的 Vue 首屏加载优化技巧&#xff1a; 使用 Vue SSR&#xff08;服务端渲染&#xff09;&#xff1…

安装matplotlib_

安装pip 安装matplotlib 安装完毕 导入出现bug......

【LeetCode热题100】--35.搜索插入位置

35.搜索插入位置 使用二分查找&#xff1a; class Solution {public int searchInsert(int[] nums, int target) {int low 0,high nums.length -1;while(low < high){//注意每次循环完都要计算midint mid (low high)/2;if(nums[mid] target){return mid;}if(nums[mid]…

SpringCloudGateway网关中各个过滤器的作用与介绍

文章目录 RemoveCachedBodyFilterAdaptCachedBodyGlobalFilterNettyWriteResponseFilterForwardPathFilterRouteToRequestUrlFilterWebSocketRoutingFilterNettyRoutingFilterForwardRoutingFilterDispatcherHandler 是什么&#xff1f;⭐如何确定最后的路由路径&#xff1f;下…

聊天记录一句一句出现的视频制作,制作抖音聊天记录视频教程

聊天记录情感中视频制作工具是一款专注于将聊天记录转化为抖音视频的工具。它可以将平淡的聊天截图转化为生动有趣的视频&#xff0c;让你的回忆变得更加具有观赏性和情感共鸣。 首先&#xff0c;聊天记录一句一句出现的视频制作功能是该工具的一大特点。通过这个功能&#xf…

LLVM IR 文档 专门解释 LLVM IR

https://llvm.org/docs/LangRef.html#phi-instruction

[C++随想录] 优先级队列的模拟实现

优先级队列的模拟实现 底层结构初始化向下调整 && 向上调整push && poptop && empty && size源码 底层结构 namespace muyu {template <class T, class Continer std::vector<T>, class Compare less<T> >class priority_…

机器学习(监督学习)笔记

目录 总览笔记内容线性回归梯度下降特征缩放多输出线性回归 逻辑回归二分类与逻辑回归分类任务的性能指标&#xff08;召回率&#xff0c;精度&#xff0c;F1分数等&#xff09;支持向量机SVMK近邻朴素贝叶斯分类器朴素贝叶斯分类器进阶多分类逻辑回归二分类神经网络多分类神经…

代码随想录 Day10 栈与队列 LeetCode T239 滑动窗口的最大值 T347 前K个高频元素

简要介绍一下单调队列和优先级队列的不同 元素顺序的处理&#xff1a;单调队列中&#xff0c;元素的顺序是单调的&#xff0c;也就是说&#xff0c;队列中的元素按照特定的单调性&#xff08;递增或递减&#xff09;排列。这种特性使得单调队列在处理一些问题时非常高效&#…

LVGL_基础控件label

LVGL_基础控件label 1、创建一个基础对象 /* 创建一个基础对象 label */ lv_obj_t * label lv_label_create(lv_scr_act()); // 创建一个label部件(对象),他的父对象是活动屏幕对象2、设置显示内容 char * text "www.100ask.net"; // 要显示的文字 /* 展示文…

postgresql新特性之Merge

postgresql新特性之Merge 创建测试表测试案例 创建测试表 create table cps.public.test(id integer primary key,balance numeric,status varchar(1));测试案例 官网介绍 merge into test t using ( select 1 id,0 balance,Y status) s on(t.id s.id) -- 当匹配上了,statu…

Spring Cloud Loadbalancer 实现客户端负载均衡

针对 ribbon 负载均衡组件&#xff0c; 官方提出的替换解决方案是 Spring Cloud Loadbalancer。本次主要通过学习示例介绍了 Spring Cloud Loadbalancer 的基础使用。 1&#xff0c;引入pom <dependency><groupId>org.springframework.cloud</groupId><…

Spring Webflux HttpHandler源码整理

HttpHandler的构造 自动启动配置类&#xff1a;HttpHandlerAutoConfigurationBean public HttpHandler httpHandler(ObjectProvider<WebFluxProperties> propsProvider) {HttpHandler httpHandler WebHttpHandlerBuilder.applicationContext(this.applicationContext).…

无状态自动配置 DHCPv6无状态配置 DHCPv6有状态配置

1、无状态自动配置 配置命令 AR1 ipv6 #开启路由器ipv6报文转发功能 interface GigabitEthernet0/0/0 ipv6 enable #开启路由器接口IPv6报文转发功能 ipv6 address FC01::1/64 …

力扣-367.有效的完全平方数

暴力 class Solution { public:bool isPerfectSquare(int num) {for(long i 1; i * i < num; i) {if(i * i num) return true;}return false;} };二分查找 class Solution { public:bool isPerfectSquare(int num) {int left 1, right num;while(left < right) {in…

免费app签名分发平台应用cdn分发平台为什么会免费?商业分析他的盈利模式

近年来&#xff0c;随着移动应用的迅速发展&#xff0c;免费app签名分发平台和应用CDN分发平台日益受到开发者和用户的关注。本报告旨在分析这些平台的商业模式&#xff0c;探讨其利润点、营销点以及所采取的优势。 一、商业模式分析&#xff1a; 广告收入&#xff1a; 免费a…

找不到msvcp110.dll是什么意思?总结msvcp110.dll丢失修复方法分享

随着电脑技术的不断发展&#xff0c;我们也会遇到各种各样的问题。最近&#xff0c;我就遇到了一个问题&#xff1a;电脑丢失msvcp110.dll的困扰。这个问题让我深感无奈&#xff0c;但同时也让我学到了很多关于电脑维修和系统修复的知识。在这篇文章中&#xff0c;我将分享我的…