Vux购物车案例

一、综合案例 - 创建项目

本案例主要针对Vuex共享数据的练习以及父子组件数据的共享。

1. 脚手架新建项目 (注意：勾选vuex)

   版本说明：

   vue2 vue-router3 vuex3

   vue3 vue-router4 vuex4/pinia

vue create vue-cart-demo
1

2. 将原本src内容清空，替换成教学资料的《vuex-cart-准备代码》

需求：

1. 发请求动态渲染购物车，数据存vuex （存cart模块， 将来还会有user模块，article模块…）
2. 数字框可以修改数据
3. 动态计算总价和总数量

二、综合案例-构建vuex-cart模块

1. 新建 store/modules/cart.js

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
}
1
2
3
4
5
6
7
8

2. 挂载到 vuex 仓库上 store/index.js

import Vuex from 'vuex'
import Vue from 'vue'

import cart from './modules/cart'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    cart
  }
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14

三、综合案例-准备后端接口服务环境(了解)

1. 安装全局工具 json-server （全局工具仅需要安装一次）

yarn global add json-server 或 npm i json-server  -g
1

2. 代码根目录新建一个 db 目录
3. 将资料 index.json 移入 db 目录

   {
   "cart": [
    {
      "id": 100001,
      "name": "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
      "price": 128,
      "count": 1,
      "thumb": "https://yanxuan-item.nosdn.127.net/3a56a913e687dc2279473e325ea770a9.jpg"
    },
    {
      "id": 100002,
      "name": "网易味央黑猪猪肘330g*1袋",
      "price": 39,
      "count": 14,
      "thumb": "https://yanxuan-item.nosdn.127.net/d0a56474a8443cf6abd5afc539aa2476.jpg"
    },
    {
      "id": 100003,
      "name": "KENROLL男女简洁多彩一片式室外拖",
      "price": 128,
      "count": 2,
      "thumb": "https://yanxuan-item.nosdn.127.net/eb1556fcc59e2fd98d9b0bc201dd4409.jpg"
    },
    {
      "id": 100004,
      "name": "云音乐定制IN系列intar民谣木吉他",
      "price": 589,
      "count": 1,
      "thumb": "https://yanxuan-item.nosdn.127.net/4d825431a3587edb63cb165166f8fc76.jpg"
      }
   ]
   }
   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

4. 进入 db 目录，执行命令，启动后端接口服务 (使用-
5. -watch 参数 可以实时监听 json 文件的修改)

json-server  --watch  index.json
1

当服务启动后，可以访问http://localhost:3000/cart获取数据

四、综合案例-请求动态渲染数据

1.目标

请求获取数据存入 vuex, 映射渲染

1. 安装 axios

yarn add axios
1

2. 准备actions 和 mutations

import axios from 'axios'

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
  mutations: {
    updateList (state, payload) {
      state.list = payload
    }
  },
  actions: {
    async getList (ctx) {
      const res = await axios.get('http://localhost:3000/cart')
      ctx.commit('updateList', res.data)
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3. App.vue页面中调用 action, 获取数据

import { mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  created () {
    this.$store.dispatch('cart/getList')
  },
  computed: {
    ...mapState('cart', ['list'])
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4. 动态渲染

1
2

cart-item.vue

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

五、综合案例-修改数量

1. 注册点击事件

-
{{item.count}}
+
1
2
3
4

2. 页面中dispatch action

onBtnClick (step) {
  const newCount = this.item.count + step
  if (newCount < 1) return

  // 发送修改数量请求
  this.$store.dispatch('cart/updateCount', {
    id: this.item.id,
    count: newCount
  })
}
1
2
3
4
5
6
7
8
9
10

3. 提供action函数

async updateCount (ctx, payload) {
  await axios.patch('http://localhost:3000/cart/' + payload.id, {
    count: payload.count
  })
  ctx.commit('updateCount', payload)
}
1
2
3
4
5
6

4. 提供mutation处理函数

mutations: {
  ...,
  updateCount (state, payload) {
    const goods = state.list.find((item) => item.id === payload.id)
    goods.count = payload.count
  }
},
1
2
3
4
5
6
7

六、综合案例-底部总价展示

1. 提供getters

getters: {
  total(state) {
    return state.list.reduce((p, c) => p + c.count, 0);
  },
  totalPrice (state) {
    return state.list.reduce((p, c) => p + c.count * c.price, 0);
  },
},
1
2
3
4
5
6
7
8

2. 动态渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21