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>