当前位置: 首页 > 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;},},
};

http://www.lryc.cn/news/130911.html

相关文章:

  • element表格多选实现
  • 宠物智能自动喂食器方案设计
  • 学习笔记230818---对于promise失败状态处理的重要性
  • 【Redis】什么是缓存击穿,如何预防缓存击穿?
  • Android 13.0 强制app横屏显示
  • 平方数之和(力扣)双指针 JAVA
  • 深入浅出Pytorch函数——torch.nn.init.sparse_
  • OpenCV实现BGR2BayerGB/BG格式的转换
  • Gateway网关路由以及predicates用法(项目中使用场景)
  • 深入浅出Pytorch函数——torch.nn.init.constant_
  • centos mysql8解决Access denied for user ‘root‘@‘localhost‘ (using password: YES)
  • Docker实战:Docker常用命令
  • 基于51单片机直流电机转速数码管显示控制系统
  • 小程序商品如何指定打印机
  • LLaMA-7B微调记录
  • 域名子目录发布问题(nginx、vue-element-admin、uni-app)
  • 【环境配置】Windows 10 安装 PyTorch 开发环境,以及验证 YOLOv8
  • 数学建模之“层次分析法”原理和代码详解
  • 使用IText导出复杂pdf
  • 多线程并发服务器(TCP)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能
  • 面试题 17.16.按摩师
  • vscode里配置C#环境并运行.cs文件
  • uniapp配置添加阿里巴巴图标icon流程步骤
  • 大模型基础02:GPT家族与提示学习
  • 算法基础课——基础算法(模板整理)
  • 如何解决使用npm出现Cannot find module ‘XXX\node_modules\npm\bin\npm-cli.js’错误
  • 【华为认证数通高级证书实验-分享篇2】
  • ui设计需要学编程吗难不难学习 优漫动游
  • 什么是线程优先级?Java中的线程优先级是如何定义和使用的?