在Vue中构建肯德基宅急送App：通过实践学习

Vue简介

Vue是一个渐进式的JavaScript框架，用于构建用户界面。它允许您使用组件化和数据驱动的编程方式来创建复杂的用户界面。Vue拥有丰富的特性，包括模板编译、数据绑定、组件化、状态管理、路由和构建工具等。

宅急送App的实现

项目结构

项目结构如下：

├── App.vue
├── components
│   ├── Cart.vue
│   ├── Home.vue
│   ├── ProductList.vue
├── main.js
└── index.html

App.vue

App.vue是Vue项目的根组件，它包含了整个项目的结构和样式。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import ProductList from './components/ProductList.vue'
import Cart from './components/Cart.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/products', component: ProductList },
  { path: '/cart', component: Cart }
]

const router = new VueRouter({
  routes
})

export default {
  router
}
</script>

Home.vue

Home.vue是项目的主页组件，它包含了产品列表和购物车按钮。

<template>
  <div class="home">
    <h1>肯德基宅急送</h1>
    <p>欢迎来到肯德基宅急送，您可以在这里订购您喜欢的肯德基产品。</p>
    <ProductList />
    <a href="/cart"><button>购物车</button></a>
  </div>
</template>

<script>
import ProductList from './ProductList.vue'

export default {
  components: { ProductList }
}
</script>

ProductList.vue

ProductList.vue是产品列表组件，它包含了所有产品的列表。

<template>
  <div class="product-list">
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}元
        <button @click="addToCart(product)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'products'
    ])
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addToCart', product)
    }
  }
}
</script>

Cart.vue

Cart.vue是购物车组件，它包含了购物车中的所有产品。

<template>
  <div class="cart">
    <h1>购物车</h1>
    <ul>
      <li v-for="product in cart" :key="product.id">
        {{ product.name }} - {{ product.price }}元
        <button @click="removeFromCart(product)">移除</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}元</p>
    <button @click="checkout">结账</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState([
      'cart'
    ]),
    ...mapGetters([
      'totalPrice'
    ])
  },
  methods: {
    ...mapActions([
      'removeFromCart',
      'checkout'
    ])
  }
}
</script>

main.js

main.js是Vue项目的入口文件，它包含了Vue实例和路由的初始化。

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: App },
    { path: '/products', component: App },
    { path: '/cart', component: App }
  ]
})

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

store.js

store.js是Vuex状态管理器的存储库文件，它包含了项目中所有的状态和操作。

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

Vue.use(Vuex)

const state = {
  products: [
    { id: 1, name: '汉堡包', price: 10 },
    { id: 2, name: '炸鸡', price: 15 },
    { id: 3, name: '可乐', price: 5 }
  ],
  cart: []
}

const mutations = {
  addToCart(state, product) {
    const cartItem = state.cart.find(item => item.id === product.id)
    if (cartItem) {
      cartItem.count++
    } else {
      state.cart.push({ ...product, count: 1 })
    }
  },
  removeFromCart(state, product) {
    const index = state.cart.findIndex(item => item.id === product.id)
    if (index !== -1) {
      state.cart.splice(index, 1)
    }
  },
  checkout(state) {
    state.cart = []
  }
}

const getters = {
  totalPrice(state) {
    return state.cart.reduce((total, item) => total + item.price * item.count, 0)
  }
}

const actions = {
  addToCart({ commit }, product) {
    commit('addToCart', product)
  },
  removeFromCart({ commit }, product) {
    commit('removeFromCart', product)
  },
  checkout({ commit }) {
    commit('checkout')
  }
}

export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions