Vue: Axios和Vuex模块化 的综合应用

Axios和Vuex模块化 的综合应用

第一步: 建一个mock --> json文件用来提供假数据

[public/mock/cartList.json]

[
  {
   
    "id": 1,
    "name": "巧克力",
    "price": 6,
    "unit": "块",
    "type": ["德芙", "费列罗"]
  },
  {
   
    "id": 2,
    "name": "牛奶",
    "price": 10,
    "unit": "袋",
    "type": ["伊利", "蒙牛", "金典"]
  }
]

第二步: 在vue文件里面引用并获取mock数据

[src/views/AxiosTest.vue]

<template>
  <div class="AxiosTest">
    <h2>Axios测试</h2>
    <button @click="getCartList">获取列表</button>
    <hr/>
    <!-- 将从后端请求过来的数据, 循环展示到页面 -->
    
    <!-- 第一种表现形式 -->
    <div v-for="item in cartList" :key="item.id">
      {
  { item.name }} 丨 {
  { item.price }}元/{
  { item.unit }}
      <!-- 展示type里面的数据 双层for循环 -->
      <div v-for="(atom, index) in item.type" :key="'a' + index">
        {
  { atom }}
      </div>
    </div>
    
	<!-- 第二种表现形式 -->
    <div v-for="item in cartList" :key