VueCli+vuex+router+BootStrap实现购物商城部分

1.工程目录

---

index.html 

---

Nav.vue

---

router的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import List from '../views/List.vue'
import Cart from '../views/Cart.vue'
import Product from '../views/Product.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'List',
    component: List
  },

  {
    path:'/product/:id',
    name:'Product',
    component:Product,
    props:true
  },
  
  {
    path: '/cart',
    name: 'Cart',
    component:Cart
   
  }
]

const router = new VueRouter({
  routes,
  // 去掉#
  mode:'history'
})

export default router

---

store的index.js

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

Vue.use(Vuex)

const state = {


  // 购物车列表
  cartList: [],
  // 商品列表
  productList: [
    {
      id: 1,
      name: 'AirPods',
      brand: 'Apple',
      image: require('../assets/1.jpg'),
      sales: 10000,
      cost: 1288,
      color: '白色'
    },
    {
      id: 2,
      name: 'BeatsX 入耳式耳机',
      brand: 'Beats',
      image: require('../assets/2.jpg'),
      sales: 11000,
      cost: 1188,
      color: '白色'
    },
    {
      id: 3,
      name: 'Beats Solo3 Wireless 头戴式式耳机',
      brand: 'Beats',
      image: require('../assets/3.jpg'),
      sales: 5000,
      cost: 2288,
      color: '金色'
    },
    {
      id: 4,
      name: 'Beats Pill+ 便携式扬声器',
      brand: 'Beats',
      image: require('../assets/4.jpg'),
      sales: 3000,
      cost: 1888,
      color: '红色'
    },
    {
      id: 5,
      name: 'Sonos PLAY:1 无线扬声器',
      brand: 'Sonos',
      image: require('../assets/5.jpg'),
      sales: 8000,
      cost: 1578,
      color: '白色'
    },
    {
      id: 6,
      name: 'Powerbeats3 by Dr. Dre Wireless 入耳式耳机',
      brand: 'Beats',
      image: require('../assets/6.jpg'),
      sales: 12000,
      cost: 1488,
      color: '金色'
    },
    {
      id: 7,
      name: 'Beats EP 头戴式耳机',
      brand: 'Beats',
      image: require('../assets/7.jpg'),
      sales: 25000,
      cost: 788,
      color: '蓝色'
    },
    {
      id: 8,
      name: 'B&O PLAY BeoPlay A1 便携式蓝牙扬声器',
      brand: 'B&O',
      image: require('../assets/8.jpg'),
      sales: 15000,
      cost: 1898,
      color: '金色'
    },
    {
      id: 9,
      name: 'Bose® QuietComfort® 35 无线耳机',
      brand: 'Bose',
      image: require('../assets/9.jpg'),
      sales: 14000,
      cost: 2878,
      color: '蓝色'
    },
    {
      id: 10,
      name: 'B&O PLAY Beoplay H4 无线头戴式耳机',
      brand: 'B&O',
      image: require('../assets/10.jpg'),
      sales: 9000,
      cost: 2298,
      color: '金色'
    }
  ],

  // 数组排重
  getFilterArray(array) {
    const res = [];
    const json = {};
    for (let i = 0; i < array.length; i++) {
      const _self = array[i];
      if (!json[_self]) {
        res.push(_self);
        json[_self] = 1;
      }
    }
    return res;
  }
}


const getters = {
  // 去掉重复的品牌
  brands: state => {
    const brands = state.productList.map(item => item.brand);
    return state.getFilterArray(brands);
  },


  // 去掉重复的颜色
  colors: state => {
    const colors = state.productList.map(item => item.color);
    return state.getFilterArray(colors);
  }
}

const mutations = {

  // 将商品添加进购物车的方法
  addCart(state,id){
     // 先判断购物车是否已有，如果有，数量+1
     const isAdded = state.cartList.find(item => item.id === id);
     if (isAdded) {
         isAdded.count ++;
     } else {
         state.cartList.push({
             id: id,
             count: 1
         })
     }
  },

     // 修改商品数量
     editCartCount (state, payload) {
      const product = state.cartList.find(item => item.id === payload.id);
      product.count += payload.count;
  },

    // 删除商品
    deleteCart (state, id) {
     
      state.cartList.splice(id, 1);
  },

   // 清空购物车
   emptyCart (state) {
    state.cartList = [];
}

}
export default new Vuex.Store({
  state: state,
  mutations: mutations,

  actions: {
      // 购买
      buy (context) {
        // 真实环境应通过 ajax 提交购买请求后再清空购物列表
        return new Promise(resolve=> {
            setTimeout(() => {
                context.commit('emptyCart');
                resolve();
            }, 500)
        });
    }
  },
  modules: {
  },

  getters: getters
})

---

Cart.vue

---

List.vue

// List.vue

---

Product.vue

// 商品详情

---

App.vue

---

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

---

命令行运行：