Tạo ứng dụng giỏ hàng sử dụng Vue.js – Vuex

Để tạo một ứng dụng giỏ hàng sử dụng Vue.js, bạn cần tạo một ứng dụng Vue mới và triển khai các tính năng cơ bản của giỏ hàng. Dưới đây là hướng dẫn cơ bản để bạn bắt đầu:

Bước 1: Tạo dự án Vue

Đảm bảo bạn đã cài đặt Node.js và Vue CLI trên máy tính của bạn.

Mở Command Prompt hoặc Terminal và tạo một dự án Vue mới bằng cách chạy lệnh sau:

vue create gio-hang

Chọn các cài đặt mặc định hoặc tùy chỉnh theo nhu cầu của bạn khi tạo dự án Vue.

Bước 2: Tạo các thành phần Vue

Trong dự án Vue của bạn, tạo các thành phần Vue cơ bản để đại diện cho giỏ hàng, sản phẩm và danh sách sản phẩm.

<!-- GioHang.vue -->
<template>
  <div>
    <h2>Giỏ hàng</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - {{ item.price }} đồng
      </li>
    </ul>
    <p>Tổng cộng: {{ total }} đồng</p>
  </div>
</template>

<script>
export default {
  computed: {
    cartItems() {
      // Trả về danh sách các sản phẩm trong giỏ hàng
      return this.$store.state.cartItems;
    },
    total() {
      // Tính tổng giá trị các sản phẩm trong giỏ hàng
      return this.cartItems.reduce((total, item) => total + item.price, 0);
    },
  },
};
</script>

Bước 3: Quản lý dữ liệu với Vuex

Tạo một Vuex store để quản lý trạng thái giỏ hàng và các hành động liên quan đến giỏ hàng.

// Trong store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    cartItems: [],
  },
  mutations: {
    addToCart(state, product) {
      state.cartItems.push(product);
    },
    clearCart(state) {
      state.cartItems = [];
    },
  },
  actions: {
    addToCart({ commit }, product) {
      commit('addToCart', product);
    },
    clearCart({ commit }) {
      commit('clearCart');
    },
  },
});

Bước 4: Tích hợp giỏ hàng vào ứng dụng Vue

Trong file main.js, nhập Vuex store và sử dụng nó để chia sẻ dữ liệu giỏ hàng với toàn bộ ứng dụng.

// Trong main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

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

Bước 5: Sử dụng thành phần Giỏ hàng trong ứng dụng Vue

Trong file App.vue, sử dụng thành phần Giỏ hàng để hiển thị giỏ hàng.

<template>
  <div id="app">
    <h1>Ứng dụng Giỏ hàng Vue</h1>
    <GioHang />
  </div>
</template>

<script>
import GioHang from './components/GioHang';

export default {
  components: {
    GioHang,
  },
};
</script>

Bước 6: Tích hợp sản phẩm và chức năng thêm vào giỏ hàng

Trong trang sản phẩm hoặc danh sách sản phẩm của bạn, sử dụng các nút hoặc sự kiện để thêm sản phẩm vào giỏ hàng thông qua Vuex store.

<template>
  <div>
    <h2>Danh sách sản phẩm</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }} đồng
        <button @click="addToCart(product)">Thêm vào giỏ hàng</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Sản phẩm 1', price: 100000 },
        { id: 2, name: 'Sản phẩm 2', price: 200000 },
        // Thêm sản phẩm khác tùy ý
      ],
    };
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addToCart', product);
    },
  },
};
</script>

Đây chỉ là một cách cơ bản để tạo một ứng dụng giỏ hàng sử dụng Vue.js. Bạn có thể mở rộng và tùy chỉnh chức năng theo ý muốn, bao gồm thêm tính năng xóa sản phẩm khỏi giỏ hàng, tăng/giảm số lượng sản phẩm, tính tổng giá trị giỏ hàng…