第60节——使用redux-toolkit实战一个商品列表的增删查改

一、样例

二、需求

调用goods.js这个单例完成对goods数据的增删查改

class Goods {
  constructor() {
    const data = localStorage.getItem("qf-goods-data");
    this.goods = data ? JSON.parse(data) : [];
  }

  time = 500;

  /**
   * 获取商品
   * @returns
   */
  getGoods() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.goods);
      }, this.time);
    });
  }

  /**
   * 创建商品
   * @param {} params
   * @returns
   */
  createGoods(params) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (!params) {
          reject("不能不传");
          return;
        }
        console.log(params, this.goods);
        this.goods = [...this.goods, { ...params }];
        resolve("成功");
        this.keepData();
      }, this.time);
    });
  }

  /**
   * 传一个列表的下表
   * @param {*} index
   * @returns
   */
  delGoods(index) {
    return new Promise((resolve, reject) => {
      if (typeof index !== "number") {
        reject("必须传数值");
      }
      const goods = [...this.goods];
      goods.splice(index, 1);
      this.goods = goods;
      resolve();
      this.keepData();
    });
  }

  /**
   * 传一个下标 在传一个数据
   * @param {*} index
   * @param {*} data
   * @returns
   */
  updateGoods(index, data) {
    return new Promise((resolve, reject) => {
      if (typeof index !== "number") {
        reject("必须传数值");
      }

      const goods = [...this.goods];
      goods[index] = data;

      this.goods = [...goods];
      resolve();
      this.keepData();
    });
  }

  /**
   * 根据下标获取最新的数据
   * @param {*} index
   * @returns
   */
  getGoodsDetail(index) {
    return new Promise((resolve, reject) => {
      if (typeof index !== "number") {
        reject("必须传数值");
      }
      resolve(this.goods[index]);
    });
  }

  async keepData() {
    const data = await this.getGoods();
    localStorage.setItem("qf-goods-data", JSON.stringify(data));
  }
}

export default new Goods();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

整个操作所有的逻辑放到redux中，页面只负责view层的渲染

ta", JSON.stringify(data));
}
}

export default new Goods();

### 整个操作所有的逻辑放到redux中，页面只负责view层的渲染

### 按照页面上出现的功能完成代码
1
2
3
4