vueX多模块---简易购物车案例

多个模块的使用，这在企业中也是常见的情况，我们通过商品添加到购物车的案例来分析一下

如上，一个简易版的商品购买的案例，Products 列表显示的是商品信息，点击 Add to cart 的时候执行添加到购物车，购物车数据会自动更新

以这个案例来说，商品和购物车实际上是两个独立的对象，后台也会有两个不同的 API 来处理

API
1. products

Request

GET https://www.fastmock.site/mock/a9b15cd4db90d4e03ed76cd3c76d9197/f6/products 
Accept: application/json, */*
Content-Type: application/json

Response

[{
   
    id:"int",// 主键
    title:"string",// 商品名称
    price:"number" // 商品价格
}]

2. cart

Request

POST https://www.fastmock.site/mock/a9b15cd4db90d4e03ed76cd3c76d9197/f6/buyproducts 
Accept: application/json, */*
Content-Type: application/json
Body:
{
  "products":[
    {
        id:""
    }
  ]
}

Response

{
   
  "success": false
}

API 开发

随着项目复杂起来，我们建议大家把所有的 api 操作封装在 api 文件里。我们可以在 src 目录创建一个 api 文件夹，然后在 src/api 目录下创建 product.js、cart.js 两个文件分别存放商品和购物车数据。

product.js

import axios from "axios";

export default {
   
  async getProducts() {
   
    const response = await axios.get(
      "https://www.fastmock.site/mock/a9b15cd4db90d4e03ed76cd3c76d9197/f6/products"
    );
    return response.data;
  }
};

cart.js

import axios from "axios";

export default {
   
  async buyProducts(products) {
   
    const response = await axios.post(
      "https://www.fastmock.site/mock/a9b15cd4db90d4e03ed76cd3c76d9197/f6/buyproducts",
      {
   
        products
      }
    );
    return response.data;
  }
};

product store

为了更好的规范目录，我们把 module store 都存放在 src/store/modules 目录下，请记住这个目录规范，在实际工作中我们都这样定义的。现在我们就可以创建一个 src/store/modules/product.js 这个 store 文件了

product state

根据页面和 API 的定义，我们可以定义一个 all 数组存放所有的商品

export default {
   
  namespaced: true,
  state: {
   
    all: []
  }
};

product mutations

在我们这个场景里，加载所有商品时候会触发修改状态，所以我们可以定义一个 setProducts 方法

export default {
   
  namespaced: true,
  state: {
   
    all: []
  },

  mutations: {
   
    setProducts(state, products) {
   
      //更新所有的商品
      state.all = products;
    }
  }
};

product actions

需要一个 getAllProducts 方法来加载所有的商品数据，这时候我们需要依赖之前的 product api

// 加载 api
import productApi from "../../api/product";

export default {
   
  namespaced