操作系统实验--模拟生产者消费者模型 vite + vue3 +ts

本文链接：https://blog.youkuaiyun.com/qq_52180526/article/details/127577750

模拟生产者消费者模型 vite + vue3 + Ts

操作系统实验，生产者消费者模型，打算做一下前端可视化的效果，上午9:44建的项目，中午1点左右完成（中间有一个小时吃饭时间）

<!--
 * @Description: 生产者消费者演示模型
 * @Version: 0.0
 * @Autor: xxx
 * @LastEditTime: 2022-10-28 09:44:00
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>生产者消费者演示模型</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

实现效果

视频链接： https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b62cc705-891c-40dd-840d-4ec39dc38538/c6e52f79-03ae-4b30-96fd-ce1d63824ccb.mp4

上线地址：http://www.zutjlx.site:8000/

所用技术

vite3
vue3 setup 语法
ts
pinia

实现步骤：

思考需要有哪些组件？

producer（生产者）， consumer（消费者）， bufferpool（缓存池，展示作用）

数据是通过 pinia 集中化管理 goods 商品货物

需要怎么控制商品的生产？

父传子组件值，来进行生产速率的设置，且保留一个最小和最大阈值，1 - 30之间

同理消耗速率，也是如此，保留一个最小和最大阈值，1-50之间

生产过程中需要怎么判断缓存区是否溢出？

在pinia上集中管理goodslist， getter 做一个计算属性的处理

import { defineStore } from "pinia";
import { good } from "../types/good";
// defineStore 调用后返回一个函数，调用该函数获得 Store 实体
export const useGoodStore = defineStore({
  // id: 必须的，在所有 Store 中唯一
  id: "good",
  // state: 返回对象的函数
  state: () => ({
    goodsList: new Array<good>(),
  }),
  getters: {
    // 是否为空
    isEmpty: (state) => {
      return state.goodsList.length == 0;
    },
    // 是否溢出
    isFull: (state) => {
      return state.goodsList.length >= 15;
    },
  },
  // actions: 返回对象的操作
  actions: {
    // 开始时重置缓存池里面的元素
    resetGood() {
      this.goodsList = new Array<good>();
    },
    // 追加元素
    appendGood(p: good) {
      this.goodsList.push(p);
    },
    // 删除首个元素
    removeGood() {
      this.goodsList.shift();
    },
  },
});