vue3+pinia购物车小例子练习

import { createApp } from 'vue';
import App from './App.vue';

import { createPinia } from 'pinia';

const app = createApp(App);

app.use(createPinia());

app.mount('#app');

interface foodType {
  id: string;
  title: string;
  price: number;
  nums: number;
}

const foods: Array<foodType> = [
  { id: 'husky', title: '哈士奇狗', price: 50, nums: 10 },
  { id: 'car', title: '玩具车', price: 10, nums: 15 },
  { id: 'milk', title: '牛奶', price: 30, nums: 5 },
];

const loadFood = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(foods);
    }, 1000);
  });
};

// @ts-ignore
const getFood: () => Array<foodType> = async function () {
  let foods = await loadFood();
  return foods as Array<foodType>;
};

export default getFood;

import { defineStore } from 'pinia';

import getFood from '../api/foods';

interface food {
  id: string;
  title: string;
  price: number;
  nums: number;
}

interface foods {
  [index: string]: food;
}

export const shopStore = defineStore('shop', {
  state: () => {
    return {
      foods: [] as Array<food>,
      isLoading: true,
    };
  },
  getters: {
    /**
     * 数组转对象 方便操作
     * @returns foods:{id:{food}}
     */
    getShopObj() {
      let foods: foods = {};
      this.foods.forEach((item) => {
        foods[item.id] = item;
      });
      return foods;
    },
  },
  actions: {
    /**
     * 异步加载数据
     */
    async loadFoods() {
      this.foods = await getFood();
      this.isLoading = false;
    },
    /**
     * 加入购物车 商品数量减1
     * @param id
     */
    joinCard(id: string) {
      this.foods.forEach((item, index) => {
        if (item.id === id) {
          if (this.foods[index].nums > 0) {
            this.foods[index].nums--;
          }
        }
      });
    },
    /**
     * 购物车商品减少 商品数量加1
     * @param id
     */
    cardToShop(id: string) {
      this.foods.forEach((item, index) => {
        if (item.id === id) {
          this.foods[index].nums++;
        }
      });
    },
  },
});

import { defineStore } from 'pinia';
import { shopStore } from './Shops';

interface food {
  id: string;
  title: string;
  price: number;
  nums: number;
}

interface cars {
  [index: string]: food;
}

export const carStore = defineStore('car', {
  state: () => {
    return {
      cars: {} as cars,
      price: 0,
    };
  },
  getters: {
    /**
     * 对象转数组 便于展示
     */
    carsList(): Array<food> {
      let cars = [];
      if (!this.cars) {
        return [];
      }
      for (var key in this.cars) {
        if (this.cars.hasOwnProperty(key)) {
          cars.push(this.cars[key]);
        }
      }
      return cars;
    },
    /**
     * 计算总价
     */
    totalPrice() {
      let cars: Array<food> = this.carsList;
      let total = cars.reduce((all, item) => {
        return all + item.price * item.nums;
      }, 0);
      return total;
    },
  },
  actions: {
    /**
     * 添加到购物车
     * @param id
     */
    addToCar(id: string) {
      const shop = shopStore();
      // 获取商品
      let foods: cars = shop.getShopObj;
      if (foods[id].nums <= 0) {
        return;
      }
      // 商品数量减少
      shop.joinCard(id);
      // 购物车如果存在商品 数量加1 否则新增
      if (this.cars[id]) {
        this.cars[id].nums++;
      } else {
        // 简单深拷贝
        this.cars[id] = JSON.parse(JSON.stringify(foods[id]));
        this.cars[id].nums = 1;
      }
    },
    /**
     * 从购物车减少
     * @param id
     */
    cudCar(id: string) {
      const shop = shopStore();
      // 如果只剩下一个就移除 否则就减少一个
      if (this.cars[id].nums === 1) {
        Reflect.deleteProperty(this.cars, id);
      } else {
        this.cars[id].nums--;
      }
      // 商品数量加1
      shop.cardToShop(id);
    },
  },
});

<template>
  <Shops />
  <Cars />
</template>

<script>
import Shops from '../components/Shops.vue'
import Cars from '../components/Cars.vue'
export default {
  components: { Cars,Shops },
}
</script>

<template>
  <ul v-if="!isLoading">
    <li v-for="item in foods" :key="item.id">
      <span>{{item.title}}</span>
      <span>单价{{item.price}}</span>
      <span>数量{{item.nums}}</span>
      <button @click="addToCar(item.id)" :disabled="item.nums===0">加入购物车</button>
    </li>
  </ul>
  <p v-if="isLoading">加载中</p>
</template>

<script>
import {shopStore} from '../store/Shops'
import {carStore} from '../store/Car'
export default {
  setup(){
    const shops = shopStore();
    shops.loadFoods()
    const car = carStore()
    const addToCar = (id) => {
      car.addToCar(id)
    }
    return {
      shops,
      addToCar
    }
  },
  computed:{
    foods(){
      return this.shops.foods
    },
    isLoading(){
      return this.shops.isLoading
    }
  }
}
</script>

<style>

</style>

<template>
  <h1>购物车</h1>
  <ul v-if="carList.length>0">
    <li v-for="item in carList" :key="item.id">
      <span>{{item.title}}</span>
      <span>单价{{item.price}}</span>
      <span>数量{{item.nums}}</span>
      <button @click="addToCar(item.id)">+</button>
      <button @click="cudCar(item.id)">-</button>
    </li>
  </ul>
  <p>总价:{{total}}</p>
</template>

<script>
import {carStore} from '../store/Car'
export default {
  setup(){
    const car = carStore()
    const addToCar = (id) => {
      car.addToCar(id)
    }
    const cudCar = (id) => {
      car.cudCar(id)
    }
    return {
      car,
      addToCar,cudCar
    }
  },
  computed:{
    carList(){
      return this.car.carsList
    },
    total(){
      return this.car.totalPrice
    }
  }
}
</script>

<style>

</style>