Chương 4-Bài 6. Cài đặt Vuex và khởi tạo dữ liệu dùng chung cho các components

Học VueJS là phải biết VUEX

Step 1: sử dụng NPM (Node packages manager) để cài đặt thư viện Vuex

• Trỏ đường dẫn cmd vào thư mục gốc project-netashop.
• Thực thi câu lệnh sau:

npm install vuex

Step 2: khởi tạo kho dữ liệu dùng chung cho các components

• Tạo thư mục project-nentang/src/store/
• Tạo file project-nentang/src/store/store.js
• Nội dung file như sau:

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

Vue.use(Vuex)

export default new Vuex.Store({
  // State là Trạng thái => hay còn gọi là Data (dữ liệu) của KHO chứa (store)
  // Tất cả dữ liệu sẽ được khởi tạo trong thuộc tính `state`
  state: {
    products: [
      {
        id: 1,
        name: 'Notebook Lenovo Ideapad 320 Intel® Core i5-7200u 8GB',
        price: 2259,
        image: require('@/assets/img/product/ipad4.png'),
        stars: 5,
        totalReviews: 230,
        details: 'Mô tả chi tiết về sản phẩm Notebook Lenovo',
        totalBuyed: 0
      },
      {
        id: 2,
        name: 'Notebook Dell Inspiron i15-3567-A30P Intel Core 7ª i5 4GB',
        price: 2284,
        image: require('@/assets/img/product/samsung-galaxy-tab.jpg'),
        stars: 3.4,
        totalReviews: 20,
        details: 'Mô tả chi tiết về sản phẩm Notebook Dell Inspiron',
        totalBuyed: 0
      },
      {
        id: 3,
        name: 'Notebook Samsung Essentials E21 Intel Celeron Dual Core',
        price: 1490,
        image: require('@/assets/img/product/iphone5.jpg'),
        stars: 1,
        totalReviews: 1,
        details: 'Mô tả chi tiết về sản phẩm Notebook Samsung Essentials',
        totalBuyed: 0
      },
      {
        id: 4,
        name: 'Notebook Samsung Expert X22 Intel Core 7 i5 8GB',
        price: 2307,
        image: require('@/assets/img/product/nokia-asha-311.jpg'),
        stars: 4.4,
        totalReviews: 340,
        details: 'Mô tả chi tiết về sản phẩm Notebook Samsung Expert',
        totalBuyed: 0
      }
    ],

    cartProducts: [],
    currentProduct: {}
  },

  // Getters: là các thuộc tính dùng để các component lấy dữ liệu từ KHO chứa (store) về
  getters: {
    getAllProducts: state => state.products,
    getProductsInCart: state => state.cartProducts,
    getCurrentProduct: state => state.currentProduct
  },

  // Mutations: là các thuộc tính dùng để thay đổi giá trị bên trong KHO chứa (store)
  // thay đổi giá trị, nhưng chạy ĐỒNG BỘ (SYNC)
  mutations: {
    ADD_PRODUCT: (state, product) => {
      let o = state.cartProducts.find(o => o.id === product.id) // Tìm sản phẩm trong Giỏ hàng theo ID
      if (!o) { // Nếu sản phẩm chưa có trong Giỏ hàng => Thêm sản phẩm vào giỏ hàng
        product.totalBuyed = 1
        state.cartProducts.push(Object.assign({}, product))
      } else { // Nếu sản phẩm đã có => cộng đồn số lượng mua lên 1 đơn vị
        o.totalBuyed += 1
      }
    },
    REMOVE_PRODUCT: (state, id) => {
      let o = state.cartProducts.find(o => o.id === id) // Tìm sản phẩm trong Giỏ hàng theo ID
      let index = state.cartProducts.indexOf(o)
      state.cartProducts.splice(index, 1)
    },
    CURRENT_PRODUCT: (state, product) => {
      state.currentProduct = product
    }
  },

  // Actions: là các hàm (methods) dùng để thực hiện các hành động thay đổi giá trị bên trong KHO chứa (store)
  // tương tự như Mutations, nhưng có thể chạy BẤT ĐỒNG BỘ (ASYNC)
  actions: {
    addProduct: (context, product) => {
      context.commit('ADD_PRODUCT', product)
    },
    removeProduct: (context, id) => {
      context.commit('REMOVE_PRODUCT', id)
    },
    currentProduct: (context, product) => {
      context.commit('CURRENT_PRODUCT', product)
    }
  }
})

Step 3: khai báo cho VueJS biết chúng ta sử dụng KHO dữ liệu dùng chung store

• Hiệu chỉnh file project-nentang/src/main.js
• Nội dung file như sau:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store.js'

Vue.config.productionTip = false

// Import thư viện Bootstrap (JS và CSS)
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

// Import thư viện Font Awesome
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { far } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

// Đăng ký component Global Layouts
import Default from './layouts/LayoutDefault.vue'
import NoSidebar from './layouts/LayoutNoSidebar.vue'

library.add(fab, fas, far)
Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.component('default-layout', Default)
Vue.component('no-sidebar-layout', NoSidebar)


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})