UniApp中购物车数据常见保存和管理

1. Vuex 状态管理

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cart: [] // 购物车数据
  },
  mutations: {
    addToCart(state, product) {
      state.cart.push(product);
    },
    removeFromCart(state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId);
    },
    clearCart(state) {
      state.cart = [];
    }
  },
  getters: {
    cartItems: state => state.cart,
    cartTotal: state => state.cart.reduce((total, item) => total + item.price * item.quantity, 0),
  }
});

2. 本地存储（localStorage / uni.setStorage）

// 添加商品到购物车
function addToCart(product) {
  let cart = uni.getStorageSync('cart') || [];
  cart.push(product);
  uni.setStorageSync('cart', cart);
}

// 获取购物车数据
function getCart() {
  return uni.getStorageSync('cart') || [];
}

// 清空购物车
function clearCart() {
  uni.removeStorageSync('cart');
}

3. 在页面中使用 cartItems

<template>
  <view>
    <text>购物车商品列表：</text>
    <view v-for="item in cartItems" :key="item.id">
      <text>{{ item.name }} - {{ item.price }} (数量: {{ item.quantity }})</text>
    </view>
    <text>总价: {{ cartTotal }}</text>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['cartItems', 'cartTotal']), // 映射 Vuex getters
  },
  methods: {
    // 其他方法
  },
  mounted() {
    // 这里可以进行其他初始化操作
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>

小结：mapGetters这是 Vuex 提供的一个辅助函数，可以让你在组件中方便地映射 Vuex 的 getters 到计算属性。通过这种方式，你可以直接使用 cartItems 和 cartTotal 作为组件的计算属性。