Membuat Shopping Cart dengan Vuex Persisted State

Photo by Morning Brew on Unsplash

Tentu kita semua sudah tahu bahwa shopping cart (keranjang belanja) adalah fitur standar yang lazim ada di setiap web atau aplikasi e-commerce.

Jika kita menggunakan Vue.js dalam pengembangan web atau aplikasi e-commerce tersebut. Kita bisa membuat fitur shopping cart dengan mudah menggunakan state management Vuex.

Akan tetapi ada sedikit catatan untuk Vuex ini. Vuex hanya menyimpan data/state di memory, sehingga apabila kita melakukan refresh atau close halaman web tersebut, maka data/state tersebut akan hilang.

Lalu bagaimana agar data/state tersebut tidak hilang? Ada banyak caranya, kita bisa menggunakan misal Local Storage, Cookies, Session Storage, dan storage-storage lainnya yang ada di browser untuk menyimpan data tersebut. Code logic untuk menyimpan dan mengambil data ke browser storage bisa kita tempatkan di Vuex Actions.
Namun alih-alih menuliskan code logic di actions, kita bisa memanfaatkan Vuex Plugins. Vuex Plugins adalah hooks yang akan dijalankan setiap ada mutation dieksekusi.

Persiapan

Untuk persiapan kita akan menggunakan starter project yang sudah saya buat disini https://github.com/alifrizkip/vue-cart-persist. Clone dan jalankan project tersebut.

Ketika klik tombol ‘tambah cart’ di halaman list produk. Maka dihalaman cart akan menampilkan daftar produk yang ada didalam cart.

halaman shopping cart

Seperti yang diterangkan diatas, jika kita refresh halaman maka produk-produk di cart akan hilang.

cart kosong jika refresh halaman

Persistent State

Untuk membuat state yang tetap atau tidak hilang meski refresh halaman, kita akan menggunakan package vuex-persistedstate.

Vuex-persistedstate adalah package untuk menerapkan persistent state di vuex yang (saat ini) paling popular dibanding package-package lainnya.

Install package vuex-persistedstate dengan npm i vuex-persistedstate . Lalu kita ubah file src/store/index.js menjadi seperti ini.

Local Storage

• Line 3, import package vuex-persistedstate
• Line 9, buat variablecartState untuk persistent state
• Line 10, key yang digunakan di local storage. Secara default vuex-persistedstate menggunakan local storage untuk menyimpan data
• Line 11, daftar state yang disimpan di local storage
  Berisi cart.carts karena state carts berada didalam module cart
• Line 18, mendaftakan cartState sebagai plugin vuex

Ketika klik tombol ‘tambah cart’ di halaman list produk lalu refresh browser. Maka dihalaman cart masih menampilkan daftar produk dan data produk-produk cart tidak hilang. Data tersebut tersimpan di local storage browser.

state cart.carts di Local Storage

Untuk code lengkapnya bisa dilihat disini https://github.com/alifrizkip/vue-cart-persist/tree/localstorage.

Cookies

Selain local storage, vuex-persistedstate juga bisa menggunakan cookies untuk menyimpan data state seperti code dibawah ini.

• Line 4, import package js-cookie. Jangan lupa untuk install package tersebut terlebih dulu dengan npm i js-cookie
• Line 13–17, disini kita definisikan ulang (override) method getItem , setItem , removeItem untuk menggunakan cookies

Ketika klik tombol ‘tambah cart’ di halaman list produk, maka data tersebut tersimpan di cookies browser.

state cart.carts di Cookies

Untuk code lengkapnya bisa dilihat disini https://github.com/alifrizkip/vue-cart-persist/tree/cookies.

Bonus

Data state yang tersimpan didalam Local Storage berbentuk plain json, sehingga mudah sekali dibaca dan sangat mudah untuk datanya dimodifikasi.
Untuk keamanan ekstra, kita bisa melakukan enkripsi terhadap data state tersebut.

Untuk mempermudah enkripsi, kita bisa menggunakan secure-ls. Sebuah package yang akan mengenkripsi data di local storage.

• Line 4, import package secure-ls. Jangan lupa untuk install package tersebut terlebih dulu dengan npm i secure-ls
• Line 10, inisiasi secureLs , jangan lupa untuk mengisi parameter encodingType dan encryptionSecret
• Line 17–21, override method getItem , setItem , removeItem untuk menggunakan secure-ls

Ketika klik tombol ‘tambah cart’ di halaman list produk, maka data tersebut tersimpan di local storage dan sudah dienkripsi sehingga menjadi sulit dibaca langsung.

state cart.carts yang dienkripsi di local storage

Untuk code lengkapnya bisa dilihat disini https://github.com/alifrizkip/vue-cart-persist/tree/secure-ls.

Cukup sekian artikel dari saya. Sampai jumpa di artikel selanjutnya. Semoga bermanfaat.