uniapp项目-配置store文件夹

1.创建store.js

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

javascript 复制代码
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') 表示触发名为 saveToStoragem_cart 模块的 mutation
  • state用函数的形式。
javascript 复制代码
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;
    },

  },
};
相关推荐
dy1717几秒前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918414 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
2501_915106324 小时前
iOS 使用记录和能耗监控实战,如何查看电池电量消耗、App 使用时长与性能数据(uni-app 开发调试必备指南)
android·ios·小程序·uni-app·cocoa·iphone·webview
程序员的世界你不懂4 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技4 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip4 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go5 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x5 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java5 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)6 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5