VueJS: Quản lý giỏ hàng trong VueApp với Vuex và ?
This post hasn't been updated for 4 years
Chào mọi người, hôm nay mình tiếp tục viết về VueJS, và lần này mình sẽ giới thiệu đến mọi người package cực kỳ hay ho mà mình sử dụng trong dự án về VueJS. Đó là vuex-shared-mutations.
1. Giới thiệu:
Nhìn vào tên package, các bạn cũng biết vuex-shared-mutations
dùng để làm gì rồi nhỉ?
Share certain Vuex mutations across multiple tabs/windows.
vuex-shared-mutations
về cơ bản sẽ đồng bộ vuex
trong trang web của bạn giữa các tabs và cả windows.
Tại sao mình
cần đồng bộ vuex
?
Cùng xem qua 1 bài toán cơ bản:
Mình sẽ dùng Lazada làm ví dụ. Chúng ta tạm coi giỏ hàng của Lazada là 1 Store
trong Vuex
.
Hãy thử đăng nhập vào Lazada
, để trống giỏ hàng, rồi chọn mở 3 sản phẩm bất kỳ sang tab mới. Ở tab 1, ta chọn THÊM VÀO GIỎ HÀNG
. Giỏ hàng sẽ thay đổi từ 0 -> 1
. Sau đó vào tab thứ 2, ta sẽ chọn THÊM VÀO GIỎ HÀNG
, lúc này tổng sản phẩm sẽ là 0 -> 2
. Đầu tiên, đây là 1 UX không tốt đối với cá nhân mình. Điều may mắn là khi cập nhật giỏ hàng, Lazada đã gọi API để lấy dữ liệu mới nhất, và vì giỏ hàng được gắn vào user, nên chúng ta sẽ có total
của giỏ hàng là 1
, sau đó thêm X sản phẩm mới vào. Thử trong trường hợp chúng ta có 1 VueApp chưa login nhưng vẫn cho mua hàng thì sao? Dữ liệu ở Vuex
lúc này không thể cross tabs/window được. À không, dữ liệu lúc này có thể cross tabs/windows được, nhờ vuex-shared-mutations.
2. Config vuex-shared-mutations
:
Mình viết 1 app đơn giản để đồng bộ biến đếm counter
như sau.
Trong file store/index
, mình sẽ viết đầy đủ các thuộc tính actions, mutations, state
:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 0,
},
mutations: {
increment(_state, data) {
_state.counter += data;
},
},
actions: {
updateCounter({ commit }, data) {
commit("increment", data);
},
},
});
Chúng ta tạo đơn giản 1 store với biến counter
tượng trưng. Lúc này, nếu bạn mở 2 tabs khác nhau thì có thể thấy dữ liệu 2 trang đang là 2 store khác nhau.
Lúc này hãy thêm vuex-shared-mutations
vào store của chúng ta:
...
import createMutationsSharer from "vuex-shared-mutations";
...
actions: {
updateCounter({ commit }, data) {
commit("increment", data);
},
},
plugins: [createMutationsSharer({ predicate: ["increment"] })],
});
Ở phần createMutationsSharer({ predicate: ["increment"] })
, bạn truyền vào tên mutaion
mà mình sẽ lắng nghe, và vuex-shared-mutaions
sẽ tự động update vuex
dựa theo mutations đã được chọn.
Demo:
- Khi chưa có
vuex-shared-mutations
:
- Khi có
vuex-shared-mutations
:
Bài viết của mình đến đây là hết. Cảm ơn mọi người đã xem qua .
All Rights Reserved