vue购物车案例

自己个人用VUE购物车案例，包括：目录结构搭建项目、实现底部tab栏切换、获取商品数据、导出store实例、商品列表页面、购物车功能、添加商品功能代码。

购物车

• 目录结构
  • |-index.html // 首页入口文件 |-static// 静态资源（图片）保存目录 |-src// 源代码目录 …（省略内部main.js等文件） |-components// 组件目录 …（省略内部*.vue文件） |-router // 路由目录 |-index.js // 路由文件 |-store // store目录 …（省略内部*.js文件）
• 搭建项目
  • 通过vue-cli脚手架工具快速搭建项目
    • vue init webpack shopcart // 创建项目 cd shopcart // 打开项目 npm install vuex@3.1.1 --save // 安装vuex包 npm run dev // 启动vue项目在http://localhost:8080
• 实现底部tab栏切换
  • 创建src\components\GoodsList.vue和Shopcart.vue文件。
    • GoodsList.vue
      • <template> <div>GoodsList</div> </template>
    • Shopcart.vue
      • <template> <div>Shopcart</div> </template>
  • 创建src\router\index.js文件，导入vue、vue-router、GoodsList和Shopcart组件。
    • src\router\index.js文件
      • import Vue from 'vue' import Router from 'vue-router' import GoodsList from '@/components/GoodsList' import Shopcart from '@/components/Shopcart'
  • 编写src\router\index.js文件，使用vue-router实现页面跳转。
    • 路由功能(三十课时)
      • Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'GoodsList', component: GoodsList }, { path: '/shopcart', name: 'Shopcart', component: Shopcart } ] })
  • 修改src\App.vue文件，利用<router-link>实现Tab栏切换。
    • router-view
      • <template> <div id="app"> <div class="content"> <router-view /> </div> </div> </template>
      • <div class="bottom"> <router-link to="/" tag="div">商品列表</router-link> <router-link to="/shopcart" tag="div">购物车</router-link> </div>
• 获取商品数据
  • 创建src\api\shop.js文件，定义data商品数据信息。
    • src\api\shop.js文件
      • const data = [ {'id': 1, 'title': '电水壶', 'price': 50.01, src: '/static/1.jpg'}, …（省略内部商品数据信息） ] export default { getGoodsList (callback) { setTimeout(() => callback(data), 100) } }
  • 编写src\store\modules\goods.js文件
    • 管理商品store
      • 定义list数组
        • const state = { list: [] } const getters = {}
    • 将商品列表保存到state中
      • setList()事件处理函数
        • // 将商品列表保存到state中 const mutations = { setList (state, data) { state.list = data } }
    • 获取商品数据信息
      • goods,js文件
        • import shop from '../../api/shop' // 获取商品列表数据 const actions = { getList ({ commit }) { shop.getGoodsList(data => { commit('setList', data) }) } }
• 导出store实例
  • 创建src\store\index.js文件，加载modules目录下的goods.js和shopcart.js模块，并且导出store实例。
    • src\store\index.js
      • import goods from './modules/goods' import shopcart from './modules/shopcart'‘ export default new Vuex.Store({ modules: { goods, shopcart } })
  • 修改src\main.js文件，将store实例导入到Vue实例的配置选项中。
    • 导入store仓库
      • import store from './store' new Vue({ ……（原有代码） store })
• 商品列表页面
  • 修改src\components\GoodsList.vue文件，输出商品列表。
    • 商品列表页面
      • <template> <div class="list"> <div class="item" v-for="goods in goodslist" :key="goods.id"> …（商品列表信息） </div> </div> </template>
      • <script> import { mapState, mapActions } from 'vuex‘ export default{ computed: mapState({goodslist: state => state.goods.list}), // 商品列表 created () {this.$store.dispatch('goods/getList')}, methods: mapActions('shopcart', ['add']), filters: {currency (value) { return '¥ ' + value}} } </script>
• 购物车功能
  • 创建src\store\modules\shopcart.js文件，定义items用来保存购物车中的商品数据。
    • 定义items数组
      • const state = { items: [] } const getters = {} const actions = {} const mutations = {}
  • 编写src\store\modules\shopcart.js文件实现购物车添加功能。
    • 添加功能
      • const actions = { add (context, item) { context.commit('add', item) }, const mutations = { add (state, item) {添加功能逻辑代码}, }
• 添加商品功能代码：
  • 添加商品功能代码
    • const v = state.items.find(v => v.id === item.id) if (v) { ++v.num } else { state.items.push({ id: item.id, title: item.title, price: item.price, src: item.src, num: 1 }) }
• 购物车
  • 编写src\store\modules\shopcart.js文件，实现购物车删除功能
    • 删除功能
      • const actions = { del (context, id) { context.commit('del', id) } } const mutations = { del (state, id) {删除商品的逻辑代码} }
• 删除商品逻辑代码
  • 删除商品逻辑代码
    • state.items.forEach((item, index, arr) => { if (item.id === id) { arr.splice(index, 1) }
• 修改src\store\modules\shopcart.js文件，实现购物车总价格的计算。
  • src\store\modules\shopcart.js
    • const getters = { totalPrice: (state) => { return state.items.reduce((total, item) => { return total + item.price * item.num }, 0) .toFixed(2) } }
• 修改src\components\Shopcart.vue文件，输出购物车列表。
  • 购物车页面
    • <template> <div class="list"> …（购物车商品列表） <div class="item-total" v-if="items.length"> 商品总价：{{total | currency}} </div> <div class="item-empty" v-else>购物车中暂无商品</div> </div> </template>
    • import { mapGetters, mapState, mapActions } from 'vuex' export default{ computed: { ...mapState({items: state => state.shopcart.items}), // 购物车商品 ...mapGetters('shopcart', { total: 'totalPrice '}) , // 总价格 }, methods: mapActions('shopcart', ['del']), // 删除购物车商品 filters: {currency (value) {return '¥ ' + value }} //添加¥符号 }
• 导入vue、vue-router、GoodsList和Shopcart组件
• ShopCart---购物车
• GoodsList---列表
• <template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器